如何在JavaScript函數內部添加for循環？

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>

這是使用函數的javascript代碼

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

您不需要遍歷它。 只需將舊值存儲在data屬性中，並且每次輸入時，都將新值添加到總計中，同時減去舊值。

 <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>

我在上面添加了類名稱filipino和data-old-value ，並將this作為oninput屬性中的參數。 我還刪除了您的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()函數將返回正確的成績。

這不是一個完整的解決方案，但可以助您一臂之力。