时间戳

首页 > 解决方案 > 使用函数和数组计算/输出错误：不是数字

javascript - 使用函数和数组计算/输出错误：不是数字

问题描述

背景：我正在练习数组和函数，但在计算数组项的总和时遇到了麻烦。我很确定我正在编写的函数有问题，但我不确定是什么。使用 8 个输入字段，我一次将数据拉入一个数组并转换为浮点数（现在......我稍后会尝试修复它）。我创建了一个函数来计算这个列表的总数，但它只输出 NaN。

任何建议都非常感谢！

function myfunction() {
  list = [];
  list[0] = parseFloat(document.getElementById('number1').value);
  list[1] = parseFloat(document.getElementById('number2').value);
  list[2] = parseFloat(document.getElementById('number3').value);
  list[3] = parseFloat(document.getElementById('number4').value);
  list[4] = parseFloat(document.getElementById('number5').value);
  list[5] = parseFloat(document.getElementById('number6').value);
  list[6] = parseFloat(document.getElementById('number7').value);
  list[7] = parseFloat(document.getElementById('number8').value);

  function total(myvals) {
    let total = 0;

    for (let i = 0; i <= myvals.length; i++) {
      total += myvals[i];
    }
    return total;
  }

  document.getElementById('results').innerHTML = total(list);
}
<form>
  <input type="text" name="number1" id="number1"><br>
  <input type="text" name="number2" id="number2"><br>
  <input type="text" name="number3" id="number3"><br>
  <input type="text" name="number4" id="number4"><br>
  <input type="text" name="number5" id="number5"><br>
  <input type="text" name="number6" id="number6"><br>
  <input type="text" name="number7" id="number7"><br>
  <input type="text" name="number8" id="number8"><br>

  <input type="submit" value="Compute Score" onclick="javascript:myfunction()">
</form>

<div id="results"></div>

标签： javascriptarrays

解决方案

这是一个使用 for 循环和querySelectorAll的简单示例。

此外，我稍微清理了您的代码。运行以下代码段：

编辑：包括一些评论以显示正在发生的事情。

function myfunction() {
  let total = 0;

  //get the value for each element being called by querySelectorAll
  //add values to total to get a sum
  document.querySelectorAll('input').forEach(el => total += +el.value);

  //append the new value to the results div
  document.querySelector('#results').innerHTML = total;
}
<form>
<input type="text" name="number1" id="number1"><br>
<input type="text" name="number2" id="number2"><br>
<input type="text" name="number3" id="number3"><br>
<input type="text" name="number4" id="number4"><br>
<input type="text" name="number5" id="number5"><br>
<input type="text" name="number6" id="number6"><br>
<input type="text" name="number7" id="number7"><br>
<input type="text" name="number8" id="number8"><br>

</form>

<br/><br/>

<button type="submit" onclick="myfunction()">Compute Score</button>

<br/><br/>

<div id="results"></div>

推荐阅读