Parse int to 0 Text if it is Alphabet String

Parse int to 0 Text if it is Alphabet String - javascript

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>

Related

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>

Change text colors every second

HTML Code
function changeColor() {
var x = document.getElementById("li1");
x.style.color = "blue";
if (x.style.color == "blue") {
x.style.color = "yellow";
}
}
window.setInterval("changeColor", 1000);
<body>
<div class="leftDiv">
<div id="stepsId">
<ol>
<li id="li1"><b>Step 1</b></li>
<li id="li2"><b>Step 2</b></li>
<li id="li3"><b>Step 3</b></li>
</ol>
</div>
</div>
</body>
My main goal is to cycle through the colors from steps 1 to 3 with each step turning blue > yellow > blue > yellow every second in ascending order. I cannot figure out what am I doing wrong.

Your existing JS doesn't work because you left the closing } off your function, and because in the call to setInterval() the function name in the first argument should not be in quotes (that is, pass a function reference, not a string).
But also, your code only references the first element in the list, and you said you want to change "each step...in ascending order". So maybe you could do something like the following, using document.querySelectorAll("#stepsId li") to select all of the li elements, then loop over them to change their colours in sequence:
var colors = ["blue", "yellow"]
var currentColor = 0
var lis = document.querySelectorAll("#stepsId li")
function changeColor() {
--currentColor
if (currentColor < 0) currentColor = colors.length -1
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = colors[(currentColor +i) % colors.length]
}
}
setInterval(changeColor, 1000)
<div id="stepsId">
<ol>
<li id="li1"><b>Step 1</b></li>
<li id="li2"><b>Step 2</b></li>
<li id="li3"><b>Step 3</b></li>
</ol>
</div>
Note that you can add any number of colours into the array and it will cycle through all of them:
var colors = ["blue", "yellow", "red", "green", "orange"]
var currentColor = 0
var lis = document.querySelectorAll("#stepsId li")
function changeColor() {
--currentColor
if (currentColor < 0) currentColor = colors.length -1
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = colors[(currentColor +i) % colors.length]
}
}
setInterval(changeColor, 1000)
<div id="stepsId">
<ol><li id="li1"><b>Step 1</b></li><li id="li2"><b>Step 2</b></li><li id="li3"><b>Step 3</b></li></ol>
</div>

To achieve expected result, use below option
1.Initialize color outside function
2.toggle color using setInterval
Codepen URL for reference- http://codepen.io/nagasai/pen/NjWBxv
JS:
var x = document.getElementById("li1");
x.style.color = "blue";
function changeColor(){
x.style.color = x.style.color == "blue"?"yellow":"blue";
}
window.setInterval(changeColor,1000);
There are few syntax errors like missing close '}' and remove quotes for function as it is not a string

Here is working code
<html>
<head>
<script type="text/javascript">
var x = setInterval(function() {
console.log('rrr');
var x = document.getElementById("li1");
x.style.color = "blue";
if (x.style.color == "blue"){
x.style.color = "yellow";
}
}, 1000);
</script>
</script>
<body>
<div class="leftDiv">
<div id = "stepsId" >
<ol>
<li id="li1"><b>Step 1</b></li>
<li id="li2"><b>Step 2</b></li>
<li id="li3"><b>Step 3</b></li>
</ol>
</div>
</div>
</body>
</html>

This works
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var x = document.getElementById("li1");
x.style.color = "blue";
function changeColor(){
if (x.style.color == "blue"){
x.style.color = "yellow";
}
else if (x.style.color == "yellow"){
x.style.color = "blue";
}
};
window.setInterval(changeColor,1000);
};
</script>
</head>
<body>
<div class="leftDiv">
<div id = "stepsId" >
<ol>
<li id="li1"><b>Step 1</b></li>
<li id="li2"><b>Step 2</b></li>
<li id="li3"><b>Step 3</b></li>
</ol>
</div>
</div>
</body>
</html>

You're only trying to change li1, rather than all of the li elements, which I assume is your intention. Try using document.querySelectorAll instead of document.getElementById and then iterating through the array, like so
function changeColor() {
var x = document.querySelectorAll("#stepsId li");
for (var i = 0; i < x.length; i++) {
x[i].style.color = x[i].style.color === 'blue' ? 'yellow' : 'blue';
}
}
window.setInterval(changeColor, 1000);
This answer assumes that you want them all changing to the same color at the same time.

Refer this code
<html>
<head>
<script type="text/javascript">
var i = 1;
var x = setInterval(function() {
var x = document.getElementById("li1");
console.log(x.style.color);
if (x.style.color == "blue"){
x.style.color = "yellow";
} else if (x.style.color === "yellow"){
x.style.color = "red";
} else if (x.style.color === "red"){
x.style.color = "blue";
}
}, 1000);
</script>
</script>
<body>
<div class="leftDiv">
<div id = "stepsId" >
<ol>
<li id="li1" style="color: blue;"><b>Step 1</b></li>
<li id="li2"><b>Step 2</b></li>
<li id="li3"><b>Step 3</b></li>
</ol>
</div>
</div>
</body>
</html>

Two things to consider first:
The JavaScript you posted is not syntactically valid because you fail to close your if statement curly brace (the "}").
The code inside your function will quickly. The only color change that you will see on the page is the final color value when your function finishes.
You will need to keep track of which element is yellow at any particular point and set up your function to determine which element should be turned yellow next.
var li1 = document.getElementById("li1");
var li2 = document.getElementById("li2");
var li3 = document.getElementById("li3");
var yellow = li1;
function changeColor() {
if(li1 == yellow) {
yellow = li2;
} else if(li2 == yellow) {
yellow = li3;
} else {
yellow = li1;
}
li1.style.color = "blue";
li2.style.color = "blue";
li3.style.color = "blue";
yellow.style.color = "yellow";
}
window.setInterval(changeColor, 1000);

This is how you can achieve a cycle! But be careful while selecting lis, beacuse I just used getElementsByTagName which will give you all the li element
var lis = document.getElementsByTagName("li");
var i = 0
var color ='blue'
function changeColor(){
if(i==3){
i=0
}
lis[i].style.color = color;
if (lis[i].style.color == "blue"){
color = 'yellow'
}
else{
color = 'blue'
}
i = i+1;
}
window.setInterval(changeColor,1000);
<html>
<body>
<div class="leftDiv">
<div id = "stepsId" >
<ol>
<li id="li1"><b>Step 1</b></li>
<li id="li2"><b>Step 2</b></li>
<li id="li3"><b>Step 3</b></li>
</ol>
</div>
</div>
</body>
</html>

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>

Add and Remove class to click a dynamic Button

Trying to Add and Remove class to click dynamic Buttons, means this button <button class="one"></button> get class dynamically like this: <button class="one text1">text1</button>
So if button one has class .text1 and by click this add class .hide to list item <li class="text1"> like <li class="text1 show">
Same for button two <button class="two"></button> and by click add class <li class="text2 show">
Note: when click button two, then should remove class .show and add new class .hideto button one.
Main HTML:
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul>
<li>
<!--List 1-->
<div class="label">
text1
</div>
</li>
<li>
<!--List 2 is Same-->
<div class="label">
text1
</div>
</li>
<li>
<!--List 3 is different-->
<div class="label">
text2
</div>
</li>
</ul>
</div>
Script:
$('.label a').each(function() {
var $this=$(this);
$this.closest('li').addClass($this.text());
});
// Combine This
$('button').each(function(){
var liInd = 0;
var cl = '';
var txt = '';
var clses = [];
var ind = $('button').index($(this)) + 1;
$('li').each(function(){
if(clses.indexOf($(this).attr('class')) === -1){
clses.push($(this).attr('class'));
liInd = liInd + 1;
}
if(ind === liInd){
cl = $(this).attr('class');
txt = $(this).find('a').text();
return false; //break
}
});
$('button:nth-child(' + ind + ')').addClass(cl);
$('button:nth-child(' + ind + ')').text(txt);
});
See Example on Fiddle
I have tried this by add/remove class by click function, but problem is Buttons get class dynamically from List items, so I'm not able to target button.
Any suggestion for other way to do this by JS/ Jquery?

Here is an alternative solution
$('button').each(function () {
var liInd = 0;
var cl = '';
var txt = '';
var clses = [];
var ind = $('button').index($(this)) + 1;
$('li').each(function () {
if (clses.indexOf($(this).attr('class')) === -1) {
clses.push($(this).attr('class'));
liInd = liInd + 1;
}
if (ind === liInd) {
cl = $(this).attr('class');
txt = $(this).find('a').text();
return false; //break
}
});
if (txt != '') {
$('button:nth-child(' + ind + ')').addClass(cl);
$('button:nth-child(' + ind + ')').text(txt);
}
});
$('button').click(function () {
if ($(this).attr('class')[0] == 'all') {
showAll();
return false; // end this function
}
var allCls = $(this).attr('class').split(' ');
$('li').each(function () {
if (allCls.indexOf($(this).find('a').text()) > -1) {
$(this).closest('li').removeClass('show').addClass('hide');
} else {
$(this).closest('li').removeClass('hide').addClass('show');
}
});
});
function showAll() {
$('li').removeClass('hide').addClass('show');
}
Fiddle: https://jsfiddle.net/taleebanwar/yaLm4euk/13/

DEMO
$('.label a').each(function () {
var $this = $(this);
$this.closest('li').addClass($this.text());
});
// Combine This
$('button').each(function () {
var liInd = 0;
var cl = '';
var txt = '';
var clses = [];
var ind = $('button').index($(this)) + 1;
$('li').each(function () {
if (clses.indexOf($(this).attr('class')) === -1) {
clses.push($(this).attr('class'));
liInd = liInd + 1;
}
if (ind === liInd) {
cl = $(this).attr('class');
txt = $(this).find('a').text();
return false; //break
}
});
$('button:nth-child(' + ind + ')').addClass(cl);
$('button:nth-child(' + ind + ')').text(txt);
});
$(document).on('click', 'button',function(e){
var textClass = $.grep(this.className.split(" "), function(v, i){
return v.indexOf('text') === 0;
}).join();
console.log(textClass);
$('li').removeClass('show').addClass('hide')
$('li').each(function(){
if($(this).hasClass($.trim(textClass))){
$(this).removeClass('hide').addClass('show');
} else {
$(this).removeClass('show').addClass('hide');
}
})
})
.show{display:list-item;}
.hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul>
<li>
<!--List 1-->
<div class="label">
text1
</div>
</li>
<li>
<!--List 2 is Same-->
<div class="label">
text1
</div>
</li>
<li>
<!--List 3 is different-->
<div class="label">
text2
</div>
</li>
</ul>
</div>

How to get the maximum value from the HTML attributes

My HTML looks like:
<ul>
<li data-target="12">1</li>
<li data-target="4">2</li>
<li data-target="9">3</li>
<li data-target="15">4</li>
<li data-target="23">5</li>
<li data-target="32">6</li>
<li data-target="7">7</li>
<li data-target="10">8</li>
<li data-target="5">9</li>
<li data-target="2">10</li>
</ul>
What method should I use to get the maximum value from the data-target attributes? Do vanilla JavaScript or jQuery have some native functions for this or I should just use for loop to iterate through all the items and get the maximum value, shouldn't I?

One way (without bothering with an array);
var max = 0;
$("li[data-target]").each(function() {
max = Math.max(max, parseInt($(this).data("target"), 10));
});
alert(max);

use Math.max.apply() method to get max value from a numeric array.
var arr = $('li[data-target]').map(function(){
return $(this).data('target')
});
console.log(Math.max.apply(Math,arr));
Fiddle Demo

Try this: use .map() along with Math function:
var targets = $("li").map(function() {
return $(this).data("target");
}).get();
var max = Math.max.apply(Math,targets);
Demo

This should work...
var array = [];
$('li').each(function() {
array.push($(this).data('target'));
});
var maxNumber = Math.max.apply(Math, array);
alert(maxNumber);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li data-target="12">1</li>
<li data-target="4">2</li>
<li data-target="9">3</li>
<li data-target="15">4</li>
<li data-target="23">5</li>
<li data-target="32">6</li>
<li data-target="7">7</li>
<li data-target="10">8</li>
<li data-target="5">9</li>
<li data-target="2">10</li>

var maxVal = 0;
$('[data-target]').each(
function(){
if($(this).attr('data-target') > maxVal){
maxVal = $(this).attr('data-target');
}
});
fiddle

Try with this:
var maxValue = 0;
$("li").each(function(index,val){
var value = $(this).attr('data-target');
if(value > maxValue) maxValue= value;
});

Yes you can get max value using for each loop of jquery. For each value of li get its attribute data-target. e.g
var maxVal=0;
$(this).find('li').each(function(){
// cache jquery var
var current = $(this);
var val=parseInt(current.attr( "data-target" ));
if(val > maxVal){
maxVal=val;
}
});
console.log(maxVal);//Its the max value

Turak Vladyslav
below code will work you can check it once
var Lis = $('#test').find('li');
var dataArray = []
for(var i=0;i<Lis.length;i++){
dataArray.push($(Lis[i]).attr('data-target'))
}
var maxDatatTarget = Math.max.apply(null, dataArray)
alert("max data target value"+maxDatatTarget)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test">
<li data-target="12">1</li>
<li data-target="4">2</li>
<li data-target="9">3</li>
<li data-target="15">4</li>
<li data-target="23">5</li>
<li data-target="32">6</li>
<li data-target="7">7</li>
<li data-target="10">8</li>
<li data-target="5">9</li>
<li data-target="2">10</li>
</ul>

Try this if it works for you :
function calculateMaxTarget(){
var attr[] = $('li').attr('data-target');
var max = 0;
for (var i=0; i < attr.length; i++) {
if(attr[i]>max){
max = attr[i];
}
};
return max;
}

Develop Reference

JavaScript is the programming language of the Web.

Parse int to 0 Text if it is Alphabet String - javascript

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); })

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); })

Related

How to rotate several strings at one time

Change text colors every second

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

Add and Remove class to click a dynamic Button

How to get the maximum value from the HTML attributes

Categories

Resources