数组总和返回 NaN答案

【问题标题】：Array sum returns NaN数组总和返回 NaN
【发布时间】：2020-07-14 05:38:51
【问题描述】：

我有一个包含三个值的数组，以及一个从表单中获取的单独值。

我正在尝试将上面的数字 (3) 与其他数字 (12、3 和 31) 相乘并将它们相加。

这是我尝试过的：

HTML：

 <p>Aantal sets: <span id="dynamicSet"></span></p>
        <table id="resultTable" cellpadding="1" cellspacing="1" border="1">
            <tr>
                <th scope="col"></th>
                <th scope="col">Hoeveelheid</th>
                <th scope="col">Gewicht x KG</th>
            </tr>
            <tr>
                <td>1</td>
                <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
            </tr>
            <tr>
                <td>2</td>
                <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
            </tr>
            <tr>
                <td>3</td>
                <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
            </tr>
        </table>

还有我的 JS：

var HoeveelheidArr=[];
var total = 0;
const setAmount = document.getElementById("dynamicSet").innerHTML;

function getData(){
    $('#resultTable .HoeveelheidField > input ').each(function() {
        HoeveelheidArr.push($(this).val());
    });

    console.log(HoeveelheidArr);

       HoeveelheidArr.forEach(function getReps (value) {
           console.log(value);
           for(var i = 0; i < HoeveelheidArr.length; i++){
               total += value[i] * setAmount;
           }

       });
    console.log(total);
}

但是，正如您在图片中看到的那样，我不断从控制台返回 Not a Number。尽管控制台显示所有这些都显示为整数？你看到我做错了吗？我也试过了：

parseInt(value[i])

【问题讨论】：

标签： javascript html foreach sum nan

【解决方案1】：

您的setAmount 变量是来自innerHTML 的字符串。

在两个变量上使用parseInt()：

total += parseInt(value[i]) * parseInt(setAmount);

更新

经过更深入的审查，您还遇到了一些其他问题。

您的 setAmount 变量是 ""，因为它没有在 HTML 中设置。
您正在循环两次HoeveelheidArr
您应该使用value 而不是value[i]

我做了一个工作示例：

var HoeveelheidArr = [];
var total = 0;
const setAmount = document.getElementById("dynamicSet").innerHTML || 0;

function getData() {
  HoeveelheidArr = [];
  total = 0;
  $('#resultTable .HoeveelheidField > input').each(function() {
    HoeveelheidArr.push($(this).val() || 0);
  });

  console.log("HoeveelheidArr:", HoeveelheidArr);

  for (var i = 0; i < HoeveelheidArr.length; i++) {
    console.log("setAmount:", setAmount);
    total += parseInt(HoeveelheidArr[i]) * parseInt(setAmount);
  }

  console.log("Total:", total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Aantal sets: <span id="dynamicSet">1</span></p>
<table id="resultTable" cellpadding="1" cellspacing="1" border="1">
  <tr>
    <th scope="col"></th>
    <th scope="col">Hoeveelheid</th>
    <th scope="col">Gewicht x KG</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="HoeveelheidField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
    <td class="GewichtField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td class="HoeveelheidField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
    <td class="GewichtField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td class="HoeveelheidField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
    <td class="GewichtField">
      <INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
    </td>
  </tr>
</table>

<button onclick="getData()">Test</button>

【讨论】：

不走运！我仍然得到 NaN :(
你是英雄！我知道我在一个带有双环的兔子洞里。非常感谢！！！

【解决方案2】：

你为什么使用 value[i] value 不是一个数组，它只是一个数字。

console.log([value[i]);

value[1] 和 value[2] 是未定义的，这就是你得到 NaN 的原因

如果你通过这段代码告诉我你想做什么，我可以更正它

【讨论】：