在 NaN 中添加数字结果

Question

<script>
function myFunction(val) {
    const ele = document.querySelectorAll('input');
    let sum = 0;
    ele.forEach(input => {
        sum += input.value ? parseFloat(input.value) : 0;
    });
    document.getElementById('result').textContent = sum.toFixed(2);
}
</script>

<form action="test.php" method="POST" enctype="multipart/form-data">

<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name= "submit" id="submit" value="Submit"/></p>

</form>

为什么结果是 NaN？但是，如果我在最后 5 行中删除 value="Submit"，那么一切正常。为什么？我应该怎么做才能解决这个问题？

Answer 1

因为 document.querySelectorAll('input'); 选择所有输入，包括提交按钮以及具有值 ='submit' 和值 submit 的不是数字 (NAN)。当您从提交按钮中删除 value 属性时，它 returns 什么都没有。

Answer 2

因为您正在 selecting 所有输入标签，所以您应该像 querySelectorAll('input[type="text"]') 一样具体 selecting。所以它将 select 只有文本输入标签。试试这个

<!DOCTYPE html>
<html>
<body>
<script>

function myFunction(val) {
    const ele = document.querySelectorAll('input[type="text"]');
    let sum = 0;
    ele.forEach(input => {

        sum += input.value ? parseFloat(input.value) : 0;
    });
    document.getElementById('result').textContent = sum.toFixed(2);
}
</script>


<form action="test.php" method="POST" enctype="multipart/form-data">

<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name= "submit" id="submit" value="Submit"/></p>

</form>
</body>
</html>

Answer 3

你的

const ele = document.querySelectorAll('input');

将遍历所有输入，包括 <input type="submit" name= "submit" id="submit" value="Submit"/>.

当您不使用 value="Submit" 时，该元素没有真正的 .value，因此它默认为空字符串：

console.log(submit.value);
console.log(submit.value.length);

<input type="submit" name="submit" id="submit">

相比之下，<input value="Submit"/>会有Submit的.value，不能变成数字。

Select 只有您输入 input 类而不是：

function myFunction() {
  const ele = document.querySelectorAll('input.input');
  let sum = 0;
  ele.forEach(input => {
    sum += input.value ? parseFloat(input.value) : 0;
  });
  document.getElementById('result').textContent = sum.toFixed(2);
}

<form action="test.php" method="POST" enctype="multipart/form-data">

  <input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
  <input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
  <p id="result"></p>
  <br>
  <p><input type="submit" name="submit" id="submit" value="Submit" /></p>

另请注意，重复 ID 是无效的 HTML，事件处理程序应使用 Javascript 正确附加，而不是使用内联处理程序：

const inputs = document.querySelectorAll('input.input');
inputs.forEach((input) => {
  input.addEventListener('keydown', () => {
    const sum = [...inputs].reduce((a, input) => a + Number(input.value), 0);
    document.getElementById('result').textContent = sum.toFixed(2);
  });
});

<form action="test.php" method="POST" enctype="multipart/form-data">

  <input type="text" class="input">
  <input type="text" class="input">
  <p id="result"></p>
  <br>
  <p><input type="submit" value="Submit"></p>
</form>

在 NaN 中添加数字结果

Adding Number Result in NaN

html

javascript

nan