Develop Reference

Parse int to 0 Text if it is Alphabet String

I am working on the following code. How can I convert alphabetical strings to 0 in sum up of li text values?
var banner = $("#sum");
var button = $("button");
button.on("click", function() {
var a = 0;
$("li").each(function() {
a += parseInt($(this).text());
});
banner.text(a);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sum">
<p>Price</p>
<button>Get Sum</button>
</div>
<ul>
<li>85</li>
<li>65</li>
<li>Not Selected</li>
<li>Not Selected</li>
<li>15</li>
</ul>

You can use jQuery's isNumeric() function to weed out the text:
var banner = $("#sum");
var button = $("button");
button.on("click", function() {
var a = 0;
$("li").each(function() {
if ($.isNumeric($(this).text())) a += parseInt($(this).text());
});
banner.text(a);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sum">
<p>Price</p>
<button>Get Sum</button>
</div>
<ul>
<li>85</li>
<li>65</li>
<li>Not Selected</li>
<li>Not Selected</li>
<li>15</li>
</ul>

do a NaN Check
var banner = $("#sum");
var button = $("button");
button.on("click", function() {
var a = 0;
var temp = 0;
$("li").each(function() {
temp = parseInt($(this).text());
if(temp !== NaN)
a += temp;
});
banner.text(a);
})

Double ~ (bitwise NOT) does the trick:
var banner = $("#sum");
var button = $("button");
button.on("click", function() {
var a = 0;
$("li").each(function() {
a += ~~$(this).text();
});
banner.text(a);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sum">
<p>Price</p>
<button>Get Sum</button>
</div>
<ul>
<li>85</li>
<li>65</li>
<li>Not Selected</li>
<li>Not Selected</li>
<li>15</li>
</ul>

For a vanilla JS solution, you could use isNaN to check whether the string is not a number and return 0, e.g.
$("li").each(function() {
const num = $(this).text();
a += parseInt(isNaN(num) ? 0 : num);
});

JavaScript has a built in method call isNan(). It returns a boolean value.
button.on("click", function() {
var a = 0;
$("li").each(function() {
b = parseInt($(this).text());
isNaN(b) ? console.log("Not a number") : a+=b
});
banner.text(a);
})

Since NaN is a falsy value in Javascript and parseInt() returns and integer or NaN you can do:
a += parseInt($(this).text(), 10) || 0;
Note also, I have defined the radix argument to 10, there is a good explanation on the description of parseInt() of why is good to the define the radix to avoid unexpected behaviors.
var banner = $("#sum");
var button = $("button");
button.on("click", function()
{
var a = 0;
$("li").each(function()
{
a += parseInt($(this).text(), 10) || 0;
});
banner.text(a);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sum">
<p>Price</p>
<button>Get Sum</button>
</div>
<ul>
<li>85</li>
<li>65</li>
<li>Not Selected</li>
<li>Not Selected</li>
<li>15</li>
</ul>

Expand/Collapse Menu not working at all

I am trying to cretae an expand/collapse menu using javascript. The structure something like this.
.menu
.subItem
.subItem
this a part of css
ul.menu {
display: none
}
but menu items not expandind from the collapse
this the js file
window.onload = initAll;
function initAll() {
var allLink = document.getElementsByTagName("a");
for (var i = 0; i < allLink.length; i++) {
if (allLink[i].className.indexOf("menuLink") > -1) {
allLink[i].onclick = togle;
}
}
}
function togle() {
var startMenu = this.href.lastIndexOf("/") + 1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu, stopMenu);
var thisMenu = document.getElementById(thisMenuName).style;
if (thisMenu.display == "block") {
thisMenu.display = "none";
} else {
thisMenu.display = "block";
}
return false;
}
when I open up chrome developer tools I have realize that Its been pointed out
this line once click the menu
var thisMenu = document.getElementById(thisMenuName).style;
What am doing wrong again again again
#Edit:I forgot to add html file
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
a
</head>
<body>
<div>
trajedi
<ul class="menu" id="menu1">
<li>deneme</li>
<li>deneme</li>
</ul>
</div>

I don't know what you tried to do with the substring part in togle function. That's the only problem with your code. Change the line:
var thisMenu = document.getElementById(thisMenuName).style;
to
var thisMenu = document.getElementById('menu1').style;
and it will work. Take a look:
window.onload = initAll;
function initAll() {
var allLink = document.getElementsByTagName("a");
for (var i = 0; i < allLink.length; i++) {
if (allLink[i].className.indexOf("menuLink") > -1) {
allLink[i].onclick = togle;
}
}
}
function togle(e) {
// can't understand the use of the 3 lines below:
var startMenu = this.href.lastIndexOf("/") + 1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu, stopMenu);
var thisMenu = document.getElementById('menu1').style;
if (thisMenu.display == "block") {
thisMenu.display = "none";
} else {
thisMenu.display = "block";
}
return false;
}
ul.menu {
display: none
}
<div>
trajedi
<ul class="menu" id="menu1">
<li>deneme</li>
<li>deneme</li>
</ul>
</div>
a much simpler and modern version of your code would be:
function initAll() {
Array.from(document.getElementsByTagName("a"))
.filter((link)=>link.className.indexOf("menuLink") > -1)
.forEach((link)=>link.onclick = ()=>{
var thisMenu = document.getElementById('menu1').style;
thisMenu.display = (thisMenu.display == "block") ? 'none' : 'block';
return false;
});
}
window.onload = initAll;
ul.menu {
display: none
}
<div>
trajedi
<ul class="menu" id="menu1">
<li>deneme</li>
<li>deneme</li>
</ul>
</div>

How to rotate several strings at one time

I'm trying to make a webpage. But I have a problem with rotating strings.
I want to make several strings to rotate when the page is loaded.
If there is only one string, it rotates well with this code.
But when there are two or more strings and I give them the same class to rotate with equivalent JavaScript code, it's not working.
It's working(Only the first string)
<body>
<div>
<ul>
<li><span id="div" style="background-color:yellowgreen">
What to eat at Newton Food Centre</span>
</li><p>
<!--<li><span class="div" style="background-color:skyblue">the
most unique cocktails in Singapore</span></li>-->
</ul>
</div>
<script>
var div = document.getElementById("div");
var timer = setInterval("doRotate()",200);
div.onclick = function (e) {
clearInterval(timer);
}
function doRotate() {
var str = div.innerHTML;
var firstChar = str.substr(0,1);
var remains = str.substr(1, str.length-1);
str = remains + firstChar;
div.innerHTML = str;
}
</script>
</body>
and this is not working
<body>
<div>
<ul>
<li><span class="div" style="background-color:yellowgreen">
What to eat at Newton Food Centre</span></li><p>
<li><span class="div" style="background-color:skyblue">
the most unique cocktails in Singapore</span></li>
</ul>
</div>
<script>
var div = document.getElementsByClassName("div");
var timer = setInterval("doRotate()",200);
div.onclick = function (e) {
clearInterval(timer);
}
function doRotate() {
var str = div.innerHTML;
var firstChar = str.substr(0,1);
var remains = str.substr(1, str.length-1);
str = remains + firstChar;
div.innerHTML = str;
}
</script>
</body>
I want to see those two strings are rotating at one time.
Please tell me the error that I'm making...
Thank you!

document.getElementsByClassName("div") will return an object of many divs and not a single div so you need to iterate on them like this :
var div = document.getElementsByClassName("div");
var timer = setInterval("doRotate()", 200);
for (var i = 0; i < div.length; i++) {
div[i].onclick = function(e) {
clearInterval(timer);
}
}
function doRotate() {
for (var i = 0; i < div.length; i++) {
var str = div[i].innerHTML;
var firstChar = str.substr(0, 1);
var remains = str.substr(1, str.length - 1);
str = remains + firstChar;
div[i].innerHTML = str;
}
}
<body>
<div>
<ul>
<li><span class="div" style="background-color:yellowgreen">
What to eat at Newton Food Centre</span></li>
<p>
<li><span class="div" style="background-color:skyblue">
the most unique cocktails in Singapore</span></li>
</ul>
</div>
<script>
</script>
</body>

How to randomly change every character inside the body of a HTML document?

<div id="contents">
<h1>Article I</h1>
<section id="sectionOne">
<p>Hello World</p>
<ul>
<li>Black world</li>
<li>White world</li>
<li>666 world</li>
</ul>
</section>
</div>
<button id="randomText">Random Text</button>
function changeContents() {
var contents = document.getElementById("contents").innerText;
var newContents = "";
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var upperAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var number = "0123456789";
function isLower(character) {
return character >= "a" && character <= "z";
}
function isUpper(character) {
return character >= "A" && character <= "Z";
}
function isDigit(character) {
return character >= "0" && character <= "9";
}
for (var counter = 0; counter < contents.length; counter++) {
if (isLower(contents.charAt(counter))) {
newContents += alphabet[Math.floor(Math.random() * alphabet.length)];
}
else if (isUpper(contents.charAt(counter))) {
newContents += upperAlphabet[Math.floor(Math.random() * alphabet.length)];
}
else if (isDigit(contents.charAt(counter))) {
newContents += number[Math.floor(Math.random() * alphabet.length)];
}
else {
newContents += contents.charAt(counter);
}
}
for (var counter = 0; counter < contents.length; counter++) {
contents = contents.replace(contents[counter], newContents[counter]);
}
document.getElementById("contents").innerText = contents;
}
I want to create a function that will take every character inside the #contents and change it randomly. The changes should not affect the style. The function is applied to #randomText on click event. How can I write it in plain JavaScript only? I write a pretty bad function here and can't get the work done correctly. Please help...

(function(){
var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var unfiltered_nodes = document.querySelectorAll('#contents *');
var nodes = [].filter.call(unfiltered_nodes, function(n){ return !n.children.length; });
var btn = document.querySelector('#randomText');
btn.onclick = randomize;
function randomize(){
for(var i = nodes.length-1; i > -1; i--){
var word = nodes[i].innerText;
for(var j = word.length-1; j > -1; j--){
var random_char = getRandomChar();
word = word.replace(word[j], random_char);
}
nodes[i].innerText = word;
}
}
function getRandomChar(){
var len = chars.length-1;
var index = Math.floor(Math.random() * (len));
return chars[index];
}
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body style='padding:5px;'>
<div id="contents">
<h1>Article I</h1>
<section id="sectionOne">
<p>Hello World</p>
<ul>
<li>Black world</li>
<li>White world</li>
<li>666 world</li>
</ul>
</section>
</div>
<button id="randomText">Random Text</button>
</body>
</html>

This should work, it's using the treewalker api, to quickly find all text nodes:
EDIT: Added reset example.
EDIT: Excluded chars not in alphabets.
function getAllTextNodes(node){
var currentNode, nodes = [];
var treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT,
{ acceptNode: function(node) {
if(/\S/.test(node.data)) return NodeFilter.FILTER_ACCEPT;
}}, false);
while(currentNode = treeWalker.nextNode()) nodes.push(currentNode);
return nodes;
}
function randomIndex(array) {
return Math.floor(Math.random() * array.length);
}
function createRandomChar(char) {
var lower = "abcdefghijklmnopqrstuvwxyz";
var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var number = "0123456789";
if((lower+upper+number).indexOf(char) < 0) return char;
if(!isNaN(parseInt(char))) return number[randomIndex(number)];
if(char === char.toLowerCase()) return lower[randomIndex(lower)];
if(char === char.toUpperCase()) return upper[randomIndex(upper)];
return char;
}
function randomizeContent(selector) {
var element = document.querySelector(selector);
var textNodes = getAllTextNodes(element);
textNodes.forEach(function(node) {
node.textContent = node.textContent.split('').map(function(char) {
return createRandomChar(char);
}).join('');
});
}
// example code
function reset(nodes, originalNodes) {
nodes.forEach(function(node, index) {
node.textContent = originalNodes[index] && originalNodes[index].textContent
});
}
var contentSelector = '#contents';
var contentElement = document.querySelector(contentSelector);
var originalNodes = getAllTextNodes(contentElement).map(function(node) {
return node.cloneNode();
});
document.querySelector('#randomText').addEventListener('click', function(e) {
randomizeContent(contentSelector);
});
document.querySelector('#resetRandomText').addEventListener('click', function(e) {
reset(getAllTextNodes(contentElement), originalNodes);
});
<div id="contents">
<h1>Article I</h1>
<section id="sectionOne">
<p>Hello World</p>
<ul>
<li>Black world</li>
<li>White world</li>
<li>666 world</li>
</ul>
</section>
<section>
<p>
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
</p>
</section>
</div>
<button id="randomText">Random Text</button>
<button id="resetRandomText">reset</button>

Rainbow Scrolling Text Using <span>

I would like to turn a small paragraph into rainbow text, in which the colors scroll from right to left in an infinite loop using JavaScript. I currently have this paragraph:
<div id="rainbow">
<p id="rtext">
<span id="s1" style="color: red">H</span>
<span id="s2" style="color: blue">e</span>
<span id="s3" style="color: green">l</span>
<span id="s4" style="color: purple">l</span>
<span id="s5" style="color: orange">o</span>
<span id="s6" style="color: magenta">!</span>
</p>
</div>
<div id="actbtn">
<button onclick="activ()">Click for RAINBOW!</button>
</div>`
I am fairly new to JavaScript so I am not sure how to write the activ() function to infinitely scroll the colors.
EDIT:
I would like to thank Ben for the looping script, but now I also need to know how to use the activ() function to change the color of a <span> element. I have tried the following script:
function activ() {
document.getElementById("s1").style.color = 'magenta';
}
But the color will not change. I am trying to keep the script as simple as possible, but also make it work.
FINAL EDIT:
I used Ivan's "UPD Without JQuery" code and added a few colors, and this is what I end up with:
<script>
function EyeVommit() {
document.getElementById("actbtn").style.display = 'none';
'use strict';
var colors = ['red', 'blue', 'green', 'purple', 'orange', 'magenta', 'chartreuse', 'cyan', 'yellow'],
target = document.getElementById('rtext').children,
i,
len = colors.length,
inter = setInterval(function() {
colors.unshift(colors.pop());
for (i = 0; i < len; i++) {
target[i].style.color = colors[i];
}
}, 200);
}
</script>
<div id="table1">
<p id="rtext"> <span id="s1">H</span><span id="s2">e</span><span id="s3">l</span><span id="s4">l</span><span id="s5">o</span><span id="s6">!</span>
<br />
<div id="actbtn">
<button onclick="EyeVommit()">Pabam!</button>
</div>
</p>
The result.

I'm begging you, never, never, never use it in design
<html>
<head>
<title>Price</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
function EyeVommit() {
'use strict';
var colors = ['red', 'blue', 'green', 'purple', 'orange', 'magenta'],
$target = $('#rtext span'),
counter,
i,
len = colors.length,
inter;
for (i = 0; i < len; i++) {
$target[i] = $($target[i]);
}
inter = setInterval(function () {
colors.unshift(colors.pop());
for (i = 0; i < len; i++) {
$target[i].css('color', colors[i]);
}
}, 200);
}
</script>
<div id="table1">
<p id="rtext">
<span id="s1">H</span>
<span id="s2">e</span>
<span id="s3">l</span>
<span id="s4">l</span>
<span id="s5">o</span>
<span id="s6">!</span>
</p>
</div>
<script>
EyeVommit();
</script>
</body>
</html>
UPD without jQuery
<script>
function EyeVommit() {
'use strict';
var colors = ['red', 'blue', 'green', 'purple', 'orange', 'magenta'],
target = document.getElementById('rtext').children,
i,
len = colors.length,
inter = setInterval(function () {
colors.unshift(colors.pop());
for (i = 0; i < len; i++) {
target[i].style.color = colors[i];
}
}, 200);
}
</script>
<div id="table1">
<p id="rtext">
<span id="s1">H</span><span id="s2">e</span><span id="s3">l</span><span id="s4">l</span><span id="s5">o</span><span id="s6">!</span>
<button onclick="EyeVommit()">Pabam!</button>
</p>
</div>

If by "Infinitely scroll" you mean create an infinite loop, you could do this.
function blaah(blaah){
//This is where you put all of your rainbow-y code
blaah("blaah");
}
Then you can just call the event through your button.
This code works because everytime the function runs, you call it again. (Second-last line of the function.)

Here's one that will work for any text that you put in the rtext block
Here is a codepen: http://codepen.io/anon/pen/GtwxD
Here's the HTML
<div id="rainbow">
<p id="rtext">Hello! This is some rainbow text!</p>
</div>
<div id="actbtn">
<button>Click for RAINBOW!</button>
</div>
This is the Javascript
$(document).ready(function(){
createSpans();
$('#actbtn').click(activ);
});
$rtxt = $('#rtext');
var text = $rtxt.html() , color;
function createSpans(){
$rtxt.html(' ');
window.colorCount = 0;
window.on = false;
colorPicker();
}
function activ(){
if(!window.on){
window.id = setInterval(colorPicker,100);
window.on = true;
}
else{
clearInterval(window.id);
window.on = false;
}
}
function colorPicker(){
$rtxt.html(' ');
window.colorCount++;
for(var letter = 0; letter < text.length; letter++){
switch ((letter + colorCount) % 6){
case 0 :
color = "red";
break;
case 1 :
color = "orange";
break;
case 2:
color = "green";
break;
case 3 :
color = "purple";
break;
case 4 :
color = "blue";
break;
case 5 :
color = "gold";
break;
default :
color = "black";
break;
}
$rtxt.append('<span style=" color:' + color + ';">' + text[letter] + '</span>');
}
}