时间戳

首页 > 解决方案 > 如何获取多个输入字段的 ID 并将它们汇总在一个跨度中

javascript - 如何获取多个输入字段的 ID 并将它们汇总在一个跨度中

问题描述

我有以下

<input type="text" class="form-control" name="total1" id="total1">
<input type="text" class="form-control" name="total1" id="total2">

我已经使用 javascript 获得了这两个值。

但我想在下面的跨度或 P 标签中显示结果

<span id="sum">0</span>

我尝试了以下...但我希望它是自动的...意味着一旦输入字段存在，总计也应该出现

<script type="text/javascript" language="javascript" charset="utf-8">

function output(){
    var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
    document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}

function updateTextInput(val) {
          document.getElementById('value2').value=val; 
        }

</script>

标签： javascript

解决方案

用一行 Javascript 计算。

function calc() {
  document.querySelector('#sum').innerHTML = [...document.querySelectorAll('input')].reduce((acc, input) => acc + Number(input.value), 0);
}
<input type="text" class="form-control" name="total1" id="total1" onchange="calc()">
<input type="text" class="form-control" name="total1" id="total2" onchange="calc()">
<p id="sum"></p>

推荐阅读