javascript - 如何获取输入的计算列的总和

Question

我有树编号列，并创建一个计算列来获取树输入的总和，但我必须单击“保存”才能看到更改。 当有人在按“保存”之前在三列之一中键入或更改数字时，我希望获得计算列上的结果。 我尝试了这个 JavaScript 代码:

function myFunction() {
    var x = document.getElementById("myInput").value;
    document.getElementById("demo").innerHTML = "You wrote: " + x;
}

但就我而言，我有 3 个数字列 任何想法？

Answer 1

请参阅下面的解决方案。您必须添加一些验证，以便只允许使用数字

var inputs = document.getElementsByClassName("myInput");

function myFunction() {
	var total = 0;

    Array.prototype.forEach.call(inputs, function (input) {
        total += +input.value;
    });

    document.getElementsByClassName("myOutput")[0].innerHTML = "The total is: " + total;
}

for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("input", function () {
        myFunction();
    });
}

<form action="#">
    <input type="text" class="myInput">
    <input type="text" class="myInput">
    <input type="text" class="myInput">
</form>

<div class="myOutput"></div>

您所做的是循环输入，同时附加事件监听器并计算总数。有两种方法可以做到这一点，都在上面实现。