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

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>

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