私が書いたこの機能に何が問題なのですか？

Question

なぜ機能しませんか？私は入力フィールドに入力された数字を自動的に "Lower Section Total"ボックスに追加します。

 3 of a kind: <input type="text" name="qtyB"> 
     <br> 
     4 of a kind: <input type="text" name="qtyB"> 
     <br> 
     Full House: <input type="text" name="qtyB"> 
     <br> 
     Little Straight: <input type="text" name="qtyB"> 
     <br> 
     Lg. Straight: <input type="text" name="qtyB"> 
     <br> 
     <b>Yahtzeebeshy:</b> <input type="text" name="qtyB"> 
     <br> 
     Chance: <input type="text" name="qtyB"> 
     <br> 
     Lower Section Total: <input type="text" id="LowerSectionTotal"> 

function findTotalB() { 
    var arrB = document.getElementsByName('qtyB'); 
    var totB = 0; 
    for (var i = 0; i < arrB.length; i++) { 
    if (parseInt(arrB[i].value)) 
     totB += parseInt(arrB[i].value); 
    } 

    document.getElementById('LowerSectionTotal').value = totB; 

} 

Answer 1

function findTotalB() { 
    var arrB = document.getElementsByName('qtyB'); 
    var totB = 0; 

    for (var i = 0; i < arrB.length; i++) { 
    var value = 0 ; 

    try { 
     value = parseInt(arrB[i].value.trim()); 
    } catch (e) { 
    } 

    totB += value ; 
    } 

    document.getElementById('LowerSectionTotal').value = totB; 

} 

Answer 2

あなたの機能は完全に罰金です。あなたは下のフィドルでそれを見ることができます。毎秒実行するように設定しています。他の入力に値を入力すると、合計が更新されることがわかります。

これで、元の入力にテキストchange eventをバインドし、その値が変更されたときにfindTotalB関数を呼び出すことができます。

function findTotalB() { 
 
    var arrB = document.getElementsByName('qtyB'); 
 
    var totB = 0; 
 
    for (var i = 0; i < arrB.length; i++) { 
 
    if (parseInt(arrB[i].value)) 
 
     totB += parseInt(arrB[i].value); 
 
    } 
 

 
    document.getElementById('LowerSectionTotal').value = totB; 
 
} 
 

 
setInterval(findTotalB, 1000);

3 of a kind: <input type="text" name="qtyB"> 
 
<br> 4 of a kind: <input type="text" name="qtyB"> 
 
<br> Full House: <input type="text" name="qtyB"> 
 
<br> Little Straight: <input type="text" name="qtyB"> 
 
<br> Lg. Straight: <input type="text" name="qtyB"> 
 
<br> 
 
<b>Yahtzeebeshy:</b> <input type="text" name="qtyB"> 
 
<br> Chance: <input type="text" name="qtyB"> 
 
<br> Lower Section Total: <input type="text" id="LowerSectionTotal">

Answer 3

はこれを試してみてください：

var arrB = document.getElementsByName('qtyB'); 
 
function findTotalB() { 
 
    
 
    var totB = 0; 
 
    for (var i = 0; i < arrB.length; i++) { 
 
    if (parseInt(arrB[i].value)) 
 
     totB += parseInt(arrB[i].value); 
 
    } 
 

 
    document.getElementById('LowerSectionTotal').value = totB; 
 

 
} 
 
for(var i = 0; i < arrB.length; i++) { 
 
\t arrB[i].onkeyup = findTotalB; \t 
 
} \t

3 of a kind: <input type="text" name="qtyB"> 
 
     <br> 
 
     4 of a kind: <input type="text" name="qtyB"> 
 
     <br> 
 
     Full House: <input type="text" name="qtyB"> 
 
     <br> 
 
     Little Straight: <input type="text" name="qtyB"> 
 
     <br> 
 
     Lg. Straight: <input type="text" name="qtyB"> 
 
     <br> 
 
     <b>Yahtzeebeshy:</b> <input type="text" name="qtyB"> 
 
     <br> 
 
     Chance: <input type="text" name="qtyB"> 
 
     <br> 
 
     Lower Section Total: <input type="text" id="LowerSectionTotal">

あなたの関数は結構です、qtBが入力された場合、コードは単にリッスンし、それがある場合には、あなたの関数fundTotalBが呼び出されます。

Answer 4

function findTotalB() { 
 
    var arrB = document.getElementsByName('qtyB'); 
 
    var totB = 0; 
 
    for (var i = 0; i < arrB.length; i++) { 
 
    if (parseInt(arrB[i].value)) 
 
     totB += parseInt(arrB[i].value); 
 
    } 
 

 
    document.getElementById('LowerSectionTotal').value = totB; 
 

 
}

3 of a kind: <input type="text" name="qtyB"> 
 
     <br> 
 
     4 of a kind: <input type="text" name="qtyB"> 
 
     <br> 
 
     Full House: <input type="text" name="qtyB"> 
 
     <br> 
 
     Little Straight: <input type="text" name="qtyB"> 
 
     <br> 
 
     Lg. Straight: <input type="text" name="qtyB"> 
 
     <br> 
 
     <b>Yahtzeebeshy:</b> <input type="text" name="qtyB"> 
 
     <br> 
 
     Chance: <input type="text" name="qtyB"> 
 
     <br> 
 
     Lower Section Total: <input type="text" id="LowerSectionTotal"> 
 

 
<button onClick="findTotalB()" > Click </button>

あなたは、関数、トリガーを追加することができます。または、すべての入力を追加することができますonchange="findTotalB()"。入力が変化するとそのトリガーが自動的に処理を行います。あなたはLower Section Totalボックスに自動的に更新したい場合は

<input onchange="findTotalB()" type="text" name="qtyB"> 

Answer 5

その後、findTotalB()イベント​​に特異的に結合します。ユーザー入力でタイプとLower Section Totalボックスが自動的に

function findTotalB() { 
 
    var arrB = document.getElementsByName('qtyB'); 
 
    var totB = 0; 
 
    for (var i = 0; i < arrB.length; i++) { 
 
    if (parseInt(arrB[i].value)) 
 
     totB += parseInt(arrB[i].value); 
 
    } 
 

 
    document.getElementById('LowerSectionTotal').value = totB; 
 

 
} 
 

 
// Binding 'keydown' event 
 
var arrB = document.getElementsByName('qtyB'); 
 
var ln = arrB.length; 
 
for (var i = 0; i < ln; i++) { 
 
    document.getElementsByName('qtyB')[i].addEventListener("keydown", findTotalB, false); 
 
}

3 of a kind: <input type="text" name="qtyB"> 
 
     <br> 
 
     4 of a kind: <input type="text" name="qtyB"> 
 
     <br> 
 
     Full House: <input type="text" name="qtyB"> 
 
     <br> 
 
     Little Straight: <input type="text" name="qtyB"> 
 
     <br> 
 
     Lg. Straight: <input type="text" name="qtyB"> 
 
     <br> 
 
     <b>Yahtzeebeshy:</b> <input type="text" name="qtyB"> 
 
     <br> 
 
     Chance: <input type="text" name="qtyB"> 
 
     <br> 
 
     Lower Section Total: <input type="text" id="LowerSectionTotal">