Question

我有多个具有相同类别的输入数字字段，我必须将它们相加，但是当我尝试使用JavaScript时，我总是得到NaN结果

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

输入的html是由php生成的，用于表的每一行

<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">

我不知道它是行不通的，它只适用于带有jquery的js，但是我必须获取每个字段的ID才能做到这一点，我想对同一个类的每个人都这样做，因为它们是动态的字段

P.S。我工作的另一部分是获取这些字段的每个名称并存储它们，以便我可以在js中创建一个数组，在其中我具有输入的名称及其数字值，但是我不知道该怎么做，因为它们是动态的

Answer 1

您可能解析的不是整数。然后parseInt将不起作用并返回NaN。如果您对一个NaN求和，则它保持NaN，例如：

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

因此解决方案是通过将NaN视为0来“抵消” NaN：

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

要将这个概念集成到您的代码中，您将获得类似以下内容的信息：

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

Answer 2

bind（）已被弃用=>在上使用

  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

问题的第1部分和 2

得到NaN的原因很可能是，如果任何输入都没有value，则要求该值返回一个空字符串（表单字段始终返回字符串）""。 parseInt("")返回NaN。

使用香草ECMAScript 6，该解决方案在Array.prototype.reduce的帮助下成为了一种方案：

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

对于第二个问题，只需使用Array.prototype.map。也是单线的。

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

注意：数组扩展运算符[...document.querySelectorAll('.input-n-pro')]从NodeList document.querySelectorAll返回中创建一个数组，因此您可以在列表上使用Array方法（如reduce和map）。

示例：

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

如果输入值之一为空，则parseInt返回NAN。因此，您可以使用IsNan函数更好地进行检查。如果输入为空，则分配0。

var x = parseInt（$（'＃abc'）。val（））;如果（isNaN（x））x = 0;

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

4 个答案:

问题的第1部分和 2