複数行の自動乗算

Question

私はコーディングで新しいです、そして、どんな助けも大歓迎です。

私は2の値から自動乗算をしようとしています。基本的に私のテーブルはthisのようです。乗算は最初の行で完全に機能します。

<tr> 
    <td><input id="box1" type="text" oninput="calculate()" /></td> 
    <td><input id="box2" type="text" oninput="calculate()" /></td> 
    <td><input id="result" /></td> 
</tr> 

次の行は機能しません。これは、第2行の第1行と全く同じであるため、idが発生する可能性があります。しかし、私がidを変更した場合、スクリプトは動作しません。それを修正する方法を教えてください？

編集：私は、テーブルのセルの入力要素のいずれかに任意のinputイベントをキャッチするテーブル、単一inputイベントハンドラをバインドします

function calculate() { 
    var myBox1 = document.getElementById('box1').value; 
    var myBox2 = document.getElementById('box2').value; 
    var result = document.getElementById('result'); 
    var myResult = myBox1 * myBox2; 
    result.value = myResult; 
    } 

Answer 1

：私は、乗算目的のために、このスクリップを使用しています。ハンドラ内でevent.targetは、イベントが発生した入力要素を参照し、DOMナビゲーションのプロパティ/メソッドを使用して、同じ行の関連する表のセルを検索できます。

たぶん少しの代わりidのclassを使用して、このような何か、：

document.getElementById("multiplier").addEventListener("input", function(e) { 
 
    var row = e.target.parentNode.parentNode 
 
    var val1 = row.querySelector(".valOne").value 
 
    var val2 = row.querySelector(".valTwo").value 
 
    row.querySelector(".result").value = val1 * val2 
 
})

<table id="multiplier"> 
 
<tr> 
 
    <td><input class="valOne" type="text" /></td> 
 
    <td><input class="valTwo" type="text" /></td> 
 
    <td><input class="result" /></td> 
 
</tr> 
 
<tr> 
 
    <td><input class="valOne" type="text" /></td> 
 
    <td><input class="valTwo" type="text" /></td> 
 
    <td><input class="result" /></td> 
 
</tr> 
 
<tr> 
 
    <td><input class="valOne" type="text" /></td> 
 
    <td><input class="valTwo" type="text" /></td> 
 
    <td><input class="result" /></td> 
 
</tr> 
 
</table>

さらに読書：

• .addEventListener() method
• .parentNode property
• .querySelector() method

とてもあなたがpolyfillを使用する必要があります代わりにe.target.parentNode.parentNodeのe.target.closest("tr")を使用しますが、.closest() methodはIEでサポートされていないことに注意することが良いだろう。私が示されてきたJS（右終了</body>タグの前に、本文の最後に、例えば）後のテーブルでscript要素にする必要があります、またはあなたが必要だろうと

注意ドキュメントロードまたはDOMContentLoadedハンドラにラップします。