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);
}


Grade Calculator

  
    Please enter student's classwork score out of 30:
  
  
    Subject 1:
    
      
  
  
    Subject 2: 
    
      
  
  
    Subject 3:
    
      
  

  
    Total Marks :
    0
  
  
    Average Percentage :
    0
  

  
    Grade:
    0
  
  
    
    
  



  
    Please enter student's classwork score out of 30:
  
  
    Subject 1:
    
      
  
  
    Subject 2: 
    
      
  
  
    Subject 3:
    
      
  

  
    Total Marks :
    0
  
  
    Average Percentage :
    0
  

  
    Grade:
    0

Narendra Jadhav · Accepted Answer

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);
 }

Create a loop to calculate average scores

Answers (2)

Working codepen

Related Questions