入力時に計算カラムの合計を得る方法

Question

私はツリー番号の列を持ち、計算された列を作成してツリー入力の合計を取得しますが、変更を見るには保存をクリックする必要があります。 誰かが3つの列のいずれかに数値を入力または変更してからsaveを押すと、結果が計算された列に表示されます。

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

が、私の場合は

は、私は3つのナンバー列 任意のアイデアを持っている： 私はこのJavaScriptコードを試してみましたか？

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>

せたように、いくつかの検証を追加する必要があります。上に実装した2つの方法があります。