无需使用 Javascript 按下按钮即可解析输入答案

【问题标题】：Parsing input without requiring button press with Javascript无需使用 Javascript 按下按钮即可解析输入
【发布时间】：2018-10-23 01:27:36
【问题描述】：

我目前正在寻找一种解决方案，可以立即/自动添加一些用户输入的数字，而无需单击任何按钮。现在，我有一个表格，要求用户输入数字并在用户单击“总计”按钮后显示结果。我想去掉那个按钮，并且每次用户更改值时，表格的“总计”行都会自动刷新到新的总计。

<!DOCTYPE html>
<html>
<head>

<title>Table</title>
<style>
body {
    width: 100%;
    height: 650px;
}

#rent, #food, #entertainment, #transportation, #total {
height: 30px;
font-size: 14pt;
}
</style>
</head>

<body>
<center>
<h1></h1>
<script type="text/javascript">

function CalcTotal() {
var total = 0;


var rent = +document.getElementById("rent").value;

var food = +document.getElementById("food").value;

var entertainment = +document.getElementById("entertainment").value;

var transportation = +document.getElementById("transportation").value;

var total = rent + food + entertainment + transportation;

document.getElementById("total").innerHTML = total;
}
</script>

<table  border="1">
    <tr>
        <th>A</th>
        <th>B</th>
    </tr>

    <tr>
        <td>Rent</td><td><input type="text" id="rent"></td>
    </tr>

    <tr>
        <td>Food</td><td><input type="text" id="food"></td>
    </tr>

    <tr>
        <td>Entertainment</td><td><input type="text" id="entertainment"></td>
    </tr>

    <tr>
        <td>Transportation</td><td><input type="text" id="transportation"> </td>
    </tr>

    <tr>
        <td>Total</td><td><div id="total"></div></td>
    </tr>

</table>

<input type="submit" value="Total" onclick="CalcTotal()" id="total">

</center>

</body>
</html>

【问题讨论】：

标签： javascript html calculator

【解决方案1】：

为每个输入字段添加一个keyup 监听器：

function CalcTotal() {
  var total = 0;
  var rent = +document.getElementById("rent").value;
  var food = +document.getElementById("food").value;
  var entertainment = +document.getElementById("entertainment").value;
  var transportation = +document.getElementById("transportation").value;
  var total = rent + food + entertainment + transportation;
  document.getElementById("total").innerHTML = total;
}

document.querySelectorAll('input[type="text"]')
  .forEach(input => input.addEventListener('keyup', CalcTotal));

body {
  width: 100%;
  height: 250px;
}

#rent,
#food,
#entertainment,
#transportation,
#total {
  height: 30px;
  font-size: 14pt;
}

<table border="1">
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>

  <tr>
    <td>Rent</td>
    <td><input type="text" id="rent"></td>
  </tr>

  <tr>
    <td>Food</td>
    <td><input type="text" id="food"></td>
  </tr>

  <tr>
    <td>Entertainment</td>
    <td><input type="text" id="entertainment"></td>
  </tr>

  <tr>
    <td>Transportation</td>
    <td><input type="text" id="transportation"> </td>
  </tr>

  <tr>
    <td>Total</td>
    <td>
      <div id="total"></div>
    </td>
  </tr>

</table>

<input type="submit" value="Total" onclick="CalcTotal()" id="total">

请注意，NodeList.forEach 有点新 - 如果您必须支持旧浏览器，则必须使用 polyfill，或者以其他方式迭代输入。例如：

Array.prototype.forEach.call(
  document.querySelectorAll('input[type="text"]'),
  input => input.addEventListener('keyup', CalcTotal)
);

【讨论】：

最后一个问题，没有 NodeList.forEach 的脚本会是什么样子？我只需要在每个变量上添加 .addEventListener('keyup', CalcTotal) 吗？
...在For examplesn-p 我在下面发帖
哦，好吧，我只是想知道如果我们将代码应用于每个人而不是所有人，代码会是什么样子。