Создайте цикл для вычисления средних баллов

Я хотел бы рассчитать среднее значение класса и захотеть сохранить входы в разных переменных. Тем не менее, баллы вычисляются вместе сразу, и у меня есть проблемы с его исправлением. Использую ли цикл for для повторения уравнения? Пожалуйста, помогите мне ! Спасибо

Вот мой код для кода: 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>

2
задан 13 August 2018 в 15:37

1 ответ

вы можете добавить родительский селектор для вычисления среднего значения для каждой таблицы

<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);
    }
0
ответ дан 15 August 2018 в 17:00

Другие вопросы по тегам:

Похожие вопросы: