どのようにループ内の関数の中にjavascriptで追加するには？

Question

私は関数の中にforループを追加するのが好きです。 最終評価は、各テキストボックスの完全な記入ではないと思われます。 例最初のグレーディングで80点のみを配置すると、自動的に最終評価が表示されます。

どうすればいいですか？

HTMLコード

<table border="0" class="table table-bordered" > 
    <tbody> 
    <tr class="bg-primary"> 
    <th rowspan="2">LEARNING AREAS</th> 
    <th colspan="4">Periodic Rating</th> 
    <th colspan="2">FINAL RATING</th> 
    <th rowspan="2">REMARKS</th> 
    </tr> 
    <tr align="center" class="bg-primary"> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>DES</td> 
    <td>NUM</td> 
    </tr> 
    <tr> 
    <td>Filipino</td> 
    <td align='center'><input class="text" size="10" type="number" min="65" max="100" name="Filipino13" id="fil13" oninput="sum38();" onkeyup="average4();" value="<?php echo $filipino13;?>"></td> 
    <td align='center'><input class="text" size="10" type="number" min="65" max="100" name="Filipino14" id="fil14" oninput="sum38();" onkeyup="average4();" value="<?php echo $filipino14;?>"></td> 
    <td align='center'><input class="text" size="10" type="number" min="65" max="100" name="Filipino15" id="fil15" oninput="sum38();" onkeyup="average4();" value="<?php echo $filipino15;?>"></td> 
    <td align='center'><input class="text" size="10" type="number" min="65" max="100" name="Filipino16" id="fil16" oninput="sum38();" onkeyup="average4();" value="<?php echo $filipino16;?>"></td> 
    <td align='center'><input class="text" size="10" type="text" name="Des_fi4" id="des29" value="<?php echo $des_fi4;?>"></td> 
    <td align='center'><input class="text" size="10" type="text" name="Aver24" id="ave29" oninput="average4();" value="<?php echo $aver24;?>"></td> 
    <td align='center'><input class="text" size="10" type="text" name="Remark_fi4" id="remark29" value="<?php echo $remark_fi4;?>"></td>  
    </tr> 
</tbody> 

これは、あなたがそれをループする必要はありません

Javascripコード

function sum38() { 
    var fil13 = document.getElementById('fil13').value; 
    var fil14 = document.getElementById('fil14').value; 
    var fil15 = document.getElementById('fil15').value; 
    var fil16 = document.getElementById('fil16').value; 

    var result29 = (parseInt(fil13) + parseInt(fil14) + parseInt(fil15) + parseInt(fil16))/4; 
    var total29 = result29.toFixed(2); 

    if (!isNaN(total29)) { 
     document.getElementById('ave29').value = total29; 

    if (result29>=75){ 
    document.getElementById('remark29').value = 'Passed'; 
    } 
    else 
    { 
     document.getElementById('remark29').value = 'Failed'; 
    }   
    } 
    if(result29 >= 90){ 
    document.getElementById('des29').value = "(A)"; 
    } 

    else if(result29 >=85){ 
    document.getElementById('des29').value = "(P)"; 
    } 

    else if(result29 >=80){ 
    document.getElementById('des29').value = "(AP)"; 
    } 

    else if(result29 >=75){ 
    document.getElementById('des29').value = "(D)"; 
    } 


    else if(result29 >=74){ 
    document.getElementById('des29').value = "(B)"; 
    } 
    else if(result29 >=0){ 
    document.getElementById('des29').value = "(B)"; 
    } 
} 

Answer 1

を機能を使用しているのjavascriptのコードです。古い値をデータ属性に格納するだけで、入力を行うたびに古い値を減算しながら新しい値を合計します。

<td align='center'> 
    <input class="filipino text" size="10" type="number" min="65" max="100" name="Filipino13" id="fil13" oninput="sum38(this);" data-old-value="<?php echo $filipino13;?>" value="<?php echo $filipino13;?>"> 
</td> 

私はあなたのoninput属性のパラメータとしてクラス名filipino以上data-old-value、およびthisを追加しました。あなたのonkeyup属性も削除しました。

function sum38(element) { 
    var des29  = document.getElementById('des29'); 
    var remark29 = document.getElementById('remark29'); 
    var ave29  = document.getElementById('ave29'); 
    var totalValue = des29.value || 0; 
    var oldValue = element.dataset.oldValue || 0; 
    var newValue = element.value || 0; 
    var numberOfGrades = document.querySelectorAll('.filipino').length; 

    totalValue  = totalValue + newValue - oldValue; 

    des29.value = totalValue; 
    ave29.value = totalValue/numberOfGrades; 
    remark29.value = (totalValue >= 75) ? 'Passed' : 'Failed'; 
} 

また、if文を新しい関数にリファクタリングして読みやすくしています。 des29.value行はdes29.value = calculateGrade(totalValue)のようになり、calculateGrade()関数は正しい等級を返します。

これは完全な解決策ではありませんが、途中で解決します。