sum - how to add for loop inside the function in javascript? -
i woul add loop inside function. appear final rating not fill of each textboxes. example if place 80 in first grading,automatically appear final rating.
how can ?
html code
<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> this code javascript using function
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)"; } }
you don't need loop through it. store old value in data attribute, , every time input, add new value total while subtracting old value.
<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> i added class name filipino , data-old-value above, , this parameter in oninput attribute. removed onkeyup attribute.
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'; } i refactor if statements new function better readability. des29.value row should des29.value = calculategrade(totalvalue) calculategrade() function returns correct grade.
it's not full solution on way.
Comments
Post a Comment