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

Parsing input without requiring button press with Javascript

我目前正在寻找一种无需单击任何按钮即可添加一些用户键入的数字的解决方案 instantly/automatically。现在,我有一个 table 要求用户输入数字并在用户单击 "Total" 按钮后显示结果。我想去掉那个按钮,并且 table 的 "Total" 行会在用户每次更改值时自动刷新到新的总数。

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

为每个输入字段添加一个 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)
);