数组总和返回 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);}然而，正如您在图片中看到的那样，我不断从控制台返回&ldquo;不是数字&rdquo;。尽管控制台显示它们全部显示为整数？你看到我做错了什么了吗？我也尝试过：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

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