时间戳

首页 > 解决方案 > 总结输入类型数组并在输出中显示

javascript - 总结输入类型数组并在输出中显示

问题描述

<html>
<body>

<input type="text" id="array[]" oninput="myFunction(this.value)">      
<input type="text" id="array[]" oninput="myFunction(this.value)">       
<p id="result"></p>

<script>
function myFunction(val) {
  document.getElementById("result").innerHTML = val; 
}
</script>

</body>
</html>

我想将两个数组相加并在“结果”中显示。但目前它只会显示一个。我可以知道如何在 javascript 中添加这两个数组吗？例如：用户输入 1 + 输入 2，它会在底部显示 3。

标签： javascripthtmlarraysinputsum

解决方案

在输入元素中添加类属性或使用标签选择器querySelectorAll。然后循环输入元素并对值求和。

function myFunction(val) {
    const ele = document.querySelectorAll('input');
    let sum = 0;
    ele.forEach(input => {

        sum += input.value ? parseFloat(input.value) : 0;
    });
    document.getElementById('result').textContent = sum.toFixed(2);
}
    <input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
    <input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
    <p id="result"></p>

推荐阅读