如何在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()函数将返回正确的成绩。

这不是一个完整的解决方案，但可以助您一臂之力。