当我在字段中输入数字时，如何实时显示结果

Question

可以在纯JS，jQuery，js ...中我只需要您在下面使用相同的逻辑：

Exemple:
<input type="number">
<input type="number">
<input type="number">
<input type="number">
<label for="total">Total:</label>
<input class="total" id="total" type="number" name="test">
<script type="text/javascript">
let total = 0;
document.querySelectorAll('input[type="number"]').forEach(el=>total+=+el.value);
document.querySelector('#total').value = total;
console.log(total);
</script>

Answer 1

const inputs = [...document.querySelectorAll('input[type="number"]')].slice(0, 4);
function getTotal() {
  const total = inputs
    .reduce((totalSoFar, el) =>
      el.value ? totalSoFar + Number(el.value) : totalSoFar
    , 0);
  document.querySelector('#total').value = total;
  console.log(total);
}
inputs.forEach(input => input.addEventListener('change', getTotal));

<input type="number">
<input type="number">
<input type="number">
<input type="number">
<label for="total">Total:</label>
<input class="total" id="total" type="number" name="test">

Answer 2

您只是没有功能来在更改或键盘上运行代码等...当一个数字更改时或按键按文档

按键时，您需要进行计算。

<input type="number">
<input type="number">
<input type="number">
<input type="number">
<label for="total">Total:</label>
<input class="total" id="total" type="number" name="test">
<script type="text/javascript">
 function  keyDownTextField(){
let total = 0;
document.querySelectorAll('input[type="number"]').forEach(el=>total+=+el.value);
document.querySelector('#total').value = total;
console.log(total);
  }
  document.addEventListener("keyup", keyDownTextField, false);

</script>

https://codepen.io/jehadja/pen/gexddj-工作示例