Create a loop to calculate average scores

Question

I would like to calculate the class average and wanted to store the inputs in different variables. However, the scores are calculating together at once and I have trouble fixing it. Do I use a for loop to repeat the equation? Please help me ! Thanks

Here is my codepen to the code: https://codepen.io/ivy-chung/pen/GBzmwb?editors=1010

$(document).ready(function() {
  //iterate through each textboxes
  $('.txtMarks').each(function() {

    // call 'calcSumAndAverage' method on keyup handler.
    $(this).keyup(function() {
      // check value is within range and is a number
      if (!isNaN(this.value) && this.value.length != 0 && this.value >= 0 && this.value <= 30) {

        calcGradeScore();
      } else {
        alert("Wrong number, number must be 0-30");
      }

    });
  });
});

function calcGradeScore() {
  var total = 0;
  var average = 0;
  var avgGrade;
  var img = document.createElement("img");

  //iterate through each textboxes with class name '.txtMarks'and add the values.
  $('.txtMarks').each(function() {

    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      total += parseFloat(this.value);
    }

  });

  //Calculate the Average
  if (!isNaN(total) && total != 0) {

    //Get count of textboxes with class '.txtMarks'
    var txtboxes = $('.txtMarks').length;
    average = parseFloat(total) / (txtboxes * 0.3);

  }

  if (average >= 80 && average < 100) {
    avgGrade = 'HD-High Distiction';
    img.src = "https://memegenerator.net/img/instances/19226146/first-assestment-of-the-year-gets-high-distinction.jpg";
  } else if (average >= 70 && average < 79) {
    avgGrade = 'D-Distiction';
    img.src = "https://memegenerator.net/img/instances/53639165/distinction-why-not-high-distinction.jpg";
  } else if (average >= 60 && average < 69) {
    avgGrade = 'C-Credit';
    img.src = "https://pics.me.me/the-face-you-make-cjthecreditfixer-when-you-check-your-credit-27495760.png";
  } else if (average >= 50 && average < 59) {
    avgGrade = 'P-Pass';
    img.src = "http://images.memes.com/meme/535301";
  } else if (average >= 0 && average < 49) {
    avgGrade = 'F-Failed';
    img.src = "https://www.36ng.ng/wp-content/uploads/2015/09/Exam-fail-3.jpg";
  }
  //Show Total Marks.
  $('#totalMarks').html(total);
  // Show Average upto 2 decimal places using .toFixed() method.
  $('#average').html(average.toFixed(1) + "%");
  // S
  $('#grade').html(avgGrade);
  //
  $('#image').html(img);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Grade Calculator</h1>
<table class="grade-table">
  <tr class="label">
    <td colspan="2">Please enter student's classwork score out of 30:</td>
  </tr>
  <tr>
    <td>Subject 1:</td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>
  <tr>
    <td>Subject 2: </td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>
  <tr>
    <td>Subject 3:</td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>

  <tr class="label">
    <td class="right">Total Marks :</td>
    <td class="center"><span id="totalMarks">0</span></td>
  </tr>
  <tr class="label">
    <td class="right">Average Percentage :</td>
    <td class="center"><span id="average">0</span></td>
  </tr>

  <tr class="label">
    <td class="right">Grade:</td>
    <td class="center"><span id="grade">0</span></td>
  </tr>
  <tr class="label">
    <td class="right"></td>
    <td class="center"><span id="image"></span></td>
  </tr>
</table>

<table class="grade-table">
  <tr class="label">
    <td colspan="2">Please enter student's classwork score out of 30:</td>
  </tr>
  <tr>
    <td>Subject 1:</td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>
  <tr>
    <td>Subject 2: </td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>
  <tr>
    <td>Subject 3:</td>
    <td>
      <input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
  </tr>

  <tr class="label">
    <td class="right">Total Marks :</td>
    <td class="center"><span id="totalMarks">0</span></td>
  </tr>
  <tr class="label">
    <td class="right">Average Percentage :</td>
    <td class="center"><span id="average">0</span></td>
  </tr>

  <tr class="label">
    <td class="right">Grade:</td>
    <td class="center"><span id="grade">0</span></td>
  </tr>
  <tr class="label">
    <td class="right"></td>
    <td class="center"><span id="image"></span></td>
  </tr>

</table>

Some things: You have ome elements with same id, which is invalid. Also, you shouldn't iterate the checkboxes via `each()` to attach the event handler, you can omit the iteration. — Chayim Friedman, Aug 13 '18 at 13:00
Possible duplicate of [How do I loop through or enumerate a JavaScript object?](https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) — Ivy, Aug 15 '18 at 07:53

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

As your are using duplicate id for Total Marks, Average Percentage, Grade and image, so instead of using duplicate id use class name and access by

$(this).closest('table').find('.classname')

So will provide you current table element and calculation will be reflect for that particular table.

Working codepen

CODE SNIPPET

 $(document).ready(function() {
     //iterate through each textboxes
     $('.txtMarks').each(function() {

         // call 'calcSumAndAverage' method on keyup handler.
         $(this).keyup(function() {
             // check value is within range and is a number
             if (!isNaN(this.value) && this.value.length != 0 && this.value >= 0 && this.value <= 30) {
                 calcGradeScore($(this).closest('table'));
             } else {
                 alert("Wrong number, number must be 0-30");
             }

         });
     });
 });

 function calcGradeScore(el) {
     var total = 0,
         average = 0,
         avgGrade,
         img = document.createElement("img"),
         txtMarks = el.find('.txtMarks');

     //iterate through each textboxes with class name '.txtMarks'and add the values.
     txtMarks.each(function() {
         //add only if the value is number
         if (!isNaN(this.value) && this.value.length != 0) {
             total += parseFloat(this.value);
         }
     });

     //Calculate the Average
     if (!isNaN(total) && total != 0) {
         //Get count of textboxes with class '.txtMarks'
         var txtboxes = txtMarks.length;
         average = parseFloat(total) / (txtboxes * 0.3);
     }

     if (average >= 80 && average < 100) {
         avgGrade = 'HD-High Distiction';
         img.src = "https://memegenerator.net/img/instances/19226146/first-assestment-of-the-year-gets-high-distinction.jpg";
     } else if (average >= 70 && average < 79) {
         avgGrade = 'D-Distiction';
         img.src = "https://memegenerator.net/img/instances/53639165/distinction-why-not-high-distinction.jpg";
     } else if (average >= 60 && average < 69) {
         avgGrade = 'C-Credit';
         img.src = "https://pics.me.me/the-face-you-make-cjthecreditfixer-when-you-check-your-credit-27495760.png";
     } else if (average >= 50 && average < 59) {
         avgGrade = 'P-Pass';
         img.src = "http://images.memes.com/meme/535301";
     } else if (average >= 0 && average < 49) {
         avgGrade = 'F-Failed';
         img.src = "https://www.36ng.ng/wp-content/uploads/2015/09/Exam-fail-3.jpg";
     }
     //Show Total Marks.
     el.find('.totalMarks').html(total);
     // Show Average upto 2 decimal places using .toFixed() method.
     el.find('.average').html(average.toFixed(1) + "%");
     // S
     el.find('.grade').html(avgGrade);
     //
     el.find('.image').html(img);
 }

score 0 · Answer 2 · answered Aug 13 '18 at 13:22

you can add the parent selector to calculate the average for each table

<table class="grade-table" id="table1">....</div>

<table class="grade-table" id="table2">....</div>


 $(document).ready(function () {
      //iterate through each textboxes
      $('.txtMarks').each(function(){

        // call 'calcSumAndAverage' method on keyup handler.
        $(this).keyup(function () {
          // check value is within range and is a number
          if (!isNaN(this.value) && this.value.length != 0 && this.value >= 0 && this.value<=30) {

            calcGradeScore('#'+this.parentElement.parentElement.parentElement.parentElement.id); // td > tr > tbody > table

          }else{
            alert("Wrong number, number must be 0-30");
          }

        });
      });
 });

    function calcGradeScore($parentSelector) {
      var total = 0;
      var average = 0;
      var avgGrade;
      var img = document.createElement("img");

      //iterate through each textboxes with class name '.txtMarks'and add the values.
      $($parentSelector +' .txtMarks').each(function () {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0 ) {
          total += parseFloat(this.value);
        }
        console.log(total);
      });

      //Calculate the Average
      if (!isNaN(total) && total != 0) {

        //Get count of textboxes with class '.txtMarks'
        var txtboxes = $($parentSelector +' .txtMarks').length;
        average = parseFloat(total) / (txtboxes*0.3);

      }

      if(average >= 80 && average < 100){
          avgGrade = 'HD-High Distiction';
        img.src = "https://memegenerator.net/img/instances/19226146/first-assestment-of-the-year-gets-high-distinction.jpg";
         }
      else if(average >= 70 && average < 79){
        avgGrade = 'D-Distiction';
        img.src = "https://memegenerator.net/img/instances/53639165/distinction-why-not-high-distinction.jpg";
      }
      else if(average >= 60 && average < 69){
        avgGrade = 'C-Credit';
        img.src = "https://pics.me.me/the-face-you-make-cjthecreditfixer-when-you-check-your-credit-27495760.png";
      }
      else if(average >= 50 && average < 59){
        avgGrade = 'P-Pass';
        img.src = "http://images.memes.com/meme/535301";
      }
      else if(average>= 0 && average < 49){
        avgGrade = 'F-Failed';
        img.src = "https://www.36ng.ng/wp-content/uploads/2015/09/Exam-fail-3.jpg";
      }
      //Show Total Marks.
      $($parentSelector +' #totalMarks').html(total);
      // Show Average upto 2 decimal places using .toFixed() method.
      $($parentSelector +' #average').html(average.toFixed(1) + "%");
      // S
      $($parentSelector +' #grade').html(avgGrade);
      //
      $($parentSelector +' #image').html(img);
    }

Create a loop to calculate average scores

2 Answers2

Working codepen