输入数字字段jquery的倍数总和

Question

i have multiple input number fields with the same class, and i have to sum them but when I try with my javascript i get always NaN result

var arrNumber = new Array(); //contain the number of specific input field

        var totale;
        $(".input-n-pro").bind('keyup mouseup', function () {
             totale = 0;
        $('.input-n-pro').each(function(){
        var this_num = $(this).val();
            totale = parseInt(this_num)+parseInt(totale);
        })
        console.log("totale="+totale);
});

The html of input is this, generated by php, one for every row of a table

<input type="number" name="<?php echo $data["name"];?>" min="0" max="500" placeholder="0" class="form-control input-xs input-n-pro" style="display: inline">

I don't know it won't work, it work with only js withous jquery but i have to get the id of every field to do that and i want to do that for everyone with the same class because they are dinamic fields

PS The other part of my work, is to get every name of those fields and store them so i can have an array in js where i have the name of input and his number value, but i don't know how to do because they are dinamic

Answer 1

You probably parsing something that is not an integer. Then the parseInt won't work and returns NaN. If you sum a NaN, then it stays a NaN, example:

 // working testcase: const testArray = ['2', '3', '4']; let total = 0; for (value of testArray) { total += parseInt(value); } // returns 9 console.log(total); // your testcase: const testArray2 = ['2', '3', 'notANumber']; let total2 = 0; for (value of testArray2) { total2 += parseInt(value); } // returns NaN since we are adding 2 + 3 + NaN = NaN console.log(total2); 

So the solution is to 'negate' the NaN by treating it as 0:

  // solution: const myArray = ['2', '3', 'notANumber', '4']; let total = 0; for (value of myArray) { // treat NaN, undefined or any falsey values as 0. total += parseInt(value) || 0; } // returns 9 console.log(total); 

To integrate this concept in your code, you'll get something like:

 let total = 0; $('.input-n-pro').each(() => { let valueInString = $(this).val(); let actualValue = parseInt(valueInString) || 0; total += actualValue; }); 

Answer 2

bind() has been deprecated => use on

  arrNumber = [], //contain the number of specific input field totale = 0; doTotale(); // first round $(".input-n-pro").on('keyup mouseup change', doTotale); function doTotale() { totale = 0; arrNumber.length = 0; $('.input-n-pro').each(function() { let name = $(this).attr('name'), val = parseInt($(this).val(),10) || 0; arrNumber.push( {name, val }); totale += val; }) console.clear(); console.log("totale =",totale); console.log("arrNumber =", JSON.stringify(arrNumber) ); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> AA : <input type="number" name="AA" value="5" class="input-n-pro" /> <br> BB : <input type="number" name="BB" value="3" class="input-n-pro" /> <br> CC : <input type="text" name="CC" value="foo" class="input-n-pro" /> <br> <!-- lets insert one input that contains no number --> DD : <input type="number" name="DD" value="2" class="input-n-pro" /> <br> EE : <input type="number" name="EE" value="11" class="input-n-pro" /> <br> FF : <input type="number" name="FF" class="input-n-pro" /> 

Answer 3

Part 1 and 2 of your question

The reason you get NaN is most probably that if any of the inputs has no value , asking for that value returns an empty string (form fields always return strings) "" . parseInt("") returns NaN .

Using vanilla ECMAScript 6, the solution is a one-liner with the help of Array.prototype.reduce :

const sum = [...document.querySelectorAll('.input-n-pro')].reduce((acc, val) => acc += Number(val.value) || 0, 0);

For your second question, just use Array.prototype.map . Also a one-liner.

const theArr = [...document.querySelectorAll('.input-n-pro')].map(x => {return { name: x.name, value: parseInt(x.value) || 0 }});

Note: The Array spread operator [...document.querySelectorAll('.input-n-pro')] makes an array from the NodeList document.querySelectorAll returns, so you can use Array methods on the list (like reduce and map).

Example:

 calc.addEventListener('click', () => { const sum = [...document.querySelectorAll('.input-n-pro')].reduce((acc, val) => acc += Number(val.value) || 0, 0); console.log(sum); }) getArr.addEventListener('click', () => { const theArr = [...document.querySelectorAll('.input-n-pro')].map(x => {return { name: x.name, value: parseInt(x.value) || 0 }}); console.log(theArr); }) 

 <input type="number" value="5" class="input-n-pro" name="a" /> <input type="number" value="3" class="input-n-pro" name="b" /> <!-- lets insert one input that contains no number --> <input type="text" value="foo" class="input-n-pro" name="m" /> <input type="number" value="2" class="input-n-pro" name="c" /> <input type="number" value="11" class="input-n-pro" name="d" /> <input type="number" class="input-n-pro" name="e" /> <br /> <button id="calc" type="button">Calculate Sum</button> <button id="getArr" type="button">Get Array of name-value pairs</button> 

Answer 4

if one of inputs value is empty then parseInt returns NAN. So you can better do a check using IsNan function. if input is empty than assign 0. For example;

var x= parseInt($('#abc').val()); if (isNaN(x)) x = 0;