数组总和 returns NaN

Question

我有一个包含三个值和 1 个单独值的数组，这些值都是从表单中获取的。

我正在尝试将最高数字 (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])

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

Answer 2

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

console.log([value[i]);

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

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

数组总和 returns NaN

Array sum returns NaN

html

javascript

foreach

sum

nan