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 Code

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

你不需要循环它。只需将旧值存储在数据属性中，每次进行输入时，将新值添加到总数中，同时减去旧值。

 <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()函数返回正确的等级。

它不是一个完整的解决方案，但它会帮助你。

如何在javascript函数中添加for循环？

1 个答案: