Question

我目前正在寻找一种解决方案，可以立即/自动添加一些用户输入的数字，而无需点击任何按钮。现在，我有一个表格询问用户数字并在用户点击＆＃34; Total＆＃34;之后显示结果。按钮。我想摆脱那个按钮，＆＃34; Total＆＃34;每次用户更改值时，表的一行会自动刷新到新的总数。

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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));

＆＃13;

body {
  width: 100%;
  height: 250px;
}

#rent,
#food,
#entertainment,
#transportation,
#total {
  height: 30px;
  font-size: 14pt;
}

＆＃13;

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

＆＃13;

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

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

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

1 个答案: