How to iterate through a table without hard coding in Javascript (grade calculator)

Question

    function grades() {
      //row 1
      var grade1 = document.getElementById("ass1").value;
      var grade2 = document.getElementById("ass2").value;
      var grade3 = document.getElementById("ass3").value;
      var grade4 = document.getElementById("ass4").value;
      var grade5 = document.getElementById("ass5").value;

      var finalgrade = Math.round(+grade1 + +grade2 + +grade3 + +grade4 + +grade5) / 5;

      //if grade is below 40 output in red
      if (finalgrade <= 40) {
        document.getElementById("fgrade").innerHTML = Math.round(finalgrade) + "%";
        document.getElementById("fgrade").style.color = "#ff0000";
      } else {
        document.getElementById("fgrade").innerHTML = Math.round(finalgrade) + "%";
      }
      //end of row 1



<table id="students">
      <tr>
        <th id=name>First Name</th>
        <th id=name2>Second Name</th>
        <th>Student ID</th>
        <th>Assignment 1 (%)</th>
        <th>Assignment 2 (%)</th>
        <th>Assignment 3 (%)</th>
        <th>Assignment 4 (%)</th>
        <th>Assignment 5 (%)</th>
        <th>Final Grade</th>
      </tr>

      <!--takes in user input for grades  -->

      <tr>
        <td>Alfreds</td>
        <td>Anders</td>
        <td>199098</td>
        <td> <input type="text" size="2" placeholder="-" id="ass1" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass2" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass3" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass4" onchange="changeHandler(this)"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass5" onchange="changeHandler(this)"></td>
        <td id="fgrade">-</td>
      </tr>

i've repeated the code 10 times I'm wondering how to do this using loops or arrays, any help is appreciated as I'm completely stuck

The goal of the program is to take in 10 student grades calculate average and output them to a final grade cell

https://jsfiddle.net/elvo6969/7zbu8pwk/359/

i have included a link to my js fiddle, the goal is not to hardcode the entire table but rather build it using loops or maybe arrays. Any pointers in the right direction are greatly appreaciated

The reason I'm doing this is because when I add a new row & try to calculate the average, I need to create a whole new function referencing each new cell for each new row that i create, how can I avoid this

Thanks

Answer 1

as your code, there is a way to refactor the code.

/*
HTML

<table id="students">
      ......
      <tr>
        <td>Alfreds</td>
        <td>Anders</td>
        <td>199098</td>
        <td> <input type="text" size="2" placeholder="-" id="ass1" onchange="changeHandler(this)" class="target"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass2" onchange="changeHandler(this)" class="target"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass3" onchange="changeHandler(this)" class="target"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass4" onchange="changeHandler(this)" class="target"></td>
        <td> <input type="text" size="2" placeholder="-" id="ass5" onchange="changeHandler(this)" class="target"></td>
        <td id="fgrade">-</td>
      </tr>
</table>
*/

// javascript
function grades(gradeNodes, finalNode) {
    let sum = 0;
    let average = -1;

    for (let i = 0, l = gradeNodes.length; i < l; i++) {
        sum += parseInt(gradeNodes[i].getAttribute('value'));
    }

    average = sum / l;

    finalNode.innerHTML = average; // because of the final result node is empty.
}

// call the function grades anywhere you want.
// grades(document.querySelectorAll('.target'), document.getElementById('fgrade'));

Advise Jquery to handle the DOM operation.

Answer 2

You can avoid repeating js code by using nested for loops as you may have 'N' (may be 10) students, each with 5 grades each.

  function grades() { // alert("w"); for(j=0;j<=9;j++){ // alert("w"+j); var finalgrade=0; for(i=1;i<=5;i++){ // alert("w"+i); finalgrade = finalgrade + +document.getElementById("ass"+i+j).value; // alert("w"+i); } finalgrade=finalgrade/5; document.getElementById("fgrade"+j).innerHTML = Math.round(finalgrade) + "%"; if (finalgrade <= 40) { document.getElementById("fgrade"+j).style.color = "#ff0000"; } else { document.getElementById("fgrade"+j).style.color = "#00ff00"; } } // alert("w"); } 

 #students { font-family: sans-serif; border-collapse: collapse; width: 100%; } #students td, #students th { border: 1px solid #ddd; padding: 8px; text-align: center; } #students td { text-align: left; } #students tr:nth-child(even) { background-color: #ffffff; } #students tr:hover { background-color: #f1ff89; } #students th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #870212; color: white; } input { text-align: right; } button { background-color: #870212; color: white; } img { height: 100px; width: 334px; } 

  <!DOCTYPE html> <html> <head> <script> </script> <script src="grades.js"></script> <link rel="stylesheet" href="grades.css"> </head> <body> <img src="https://www.maynoothuniversity.ie/sites/all/themes/nuim_themes/nuim/logo_old_2.png" alt="HTML5 Icon" width="334" height="150"> <h2> Semester 2 Exam Results </h2> <table id="students"> <tr> <th id=name>First Name</th> <th id=name2>Second Name</th> <th>Student ID</th> <th>Assignment 1 (%)</th> <th>Assignment 2 (%)</th> <th>Assignment 3 (%)</th> <th>Assignment 4 (%)</th> <th>Assignment 5 (%)</th> <th>Final Grade</th> </tr> <!--takes in user input for grades --> <tr> <td>Alfreds</td> <td>Anders</td> <td>199098</td> <td> <input type="text" size="2" placeholder="-" id="ass10" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass20" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass30" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass40" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass50" onchange="changeHandler(this)"></td> <td id="fgrade0">-</td> </tr> <tr> <td>Billy</td> <td>Jean</td> <td>696969</td> <td> <input type="text" size="2" placeholder="-" id="ass11" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass21" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass31" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass41" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass51" onchange="changeHandler(this)"></td> <td id="fgrade1">-</td> </tr> <tr> <td>Joe</td> <td>Doe</td> <td>123454</td> <td> <input type="text" size="2" placeholder="-" id="ass12" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass22" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass32" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass42" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass52" onchange="changeHandler(this)"></td> <td id="fgrade2">-</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>8686858</td> <td> <input type="text" size="2" placeholder="-" id="ass13" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass23" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass33" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass43" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass53" onchange="changeHandler(this)"></td> <td id="fgrade3">-</td> </tr> <tr> <td>Adolf</td> <td>Eichman</td> <td>321332</td> <td> <input type="text" size="2" placeholder="-" id="ass14" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass24" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass34" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass44" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass54" onchange="changeHandler(this)"></td> <td id="fgrade4">-</td> </tr> <tr> <td>Jake</td> <td>Jakeson</td> <td>134338</td> <td> <input type="text" size="2" placeholder="-" id="ass15" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass25" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass35" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass45" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass55" onchange="changeHandler(this)"></td> <td id="fgrade5">-</td> </tr> <tr> <td>Bob</td> <td>Hand</td> <td>1900098</td> <td> <input type="text" size="2" placeholder="-" id="ass16" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass26" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass36" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass46" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass56" onchange="changeHandler(this)"></td> <td id="fgrade6">-</td> </tr> <tr> <td>Vladimir</td> <td>Putin</td> <td>1475732</td> <td> <input type="text" size="2" placeholder="-" id="ass17" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass27" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass37" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass47" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass57" onchange="changeHandler(this)"></td> <td id="fgrade7">-</td> </tr> <tr> <td>Barrack</td> <td>Obamo</td> <td>200008</td> <td> <input type="text" size="2" placeholder="-" id="ass18" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass28" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass38" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass48" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass58" onchange="changeHandler(this)"></td> <td id="fgrade8">-</td> </tr> <tr> <td>Alfonzo</td> <td>Gargonzales</td> <td>1646363</td> <td> <input type="text" size="2" placeholder="-" id="ass19" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass29" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass39" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass49" onchange="changeHandler(this)"></td> <td> <input type="text" size="2" placeholder="-" id="ass59" onchange="changeHandler(this)"></td> <td id="fgrade9">-</td> </tr> </table> <button id="grades" onclick='grades()'>Calculate Final Grade</button> <button id="newRow" onclick='addField()'>Add a row</button> <!-- <button id="newColumn" onclick='function()'>Add a Column</button> --> <!-- this js script changes user input to 100 a user inputs a number greater than 100 also output 0 if a user enters a number below 0--> <script> function changeHandler(val) { if (Number(val.value) > 100) { val.value = 100 } else if (Number(val.value) < 0) { val.value = 0 } } </script> </body> </html> 

JSFiddle Output

Also if you want to avoid repeating the html code or want to create more rows and columns then you can create a database and can use php loops.