Как получить сумму вычисленного столбца на входе

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() { 
 
\t 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>

Что вы делаете петлю через входы во время прикрепления слушателя событий и расчета суммы. есть два способа сделать это, оба реализованы выше.