How to average numbers and show result dynamically

Question

I want to average numbers froms four(4) input fields(with Min. value of 0 and Max. value of 100) and show the result dynamically (i.e. without reloading the page) immdiately any of the fields is filled. Then in the last column, is for the grade which is also dynamic. Should show A for value between 80 and 100 with a blue coloured cell, B for value between 60 and 80 with a green coloured cell and so on. But the grade is not working. I also want to input the data into a database dynamically using ajax but I don't know how to go about it. Below is what I have come up with. Thanks in advance. Below is the code

$('#input1').keyup(function() {
  evaluate();
});
$('#input2').keyup(function() {
  evaluate();
});
$('#input3').keyup(function() {
  evaluate();
});
$('#input4').keyup(function() {
  evaluate();
});

var evaluate = function() {
  var input1 = parseInt($('#input1').val());
  var input2 = parseInt($('#input2').val());
  var input3 = parseInt($('#input3').val());
  var input4 = parseInt($('#input4').val());

  if (isNaN(input1) || isNaN(input2) || isNaN(input3) || isNaN(input4)) {
    $('#error').text('Inputs must be numbers');
  } else {
    var ave = (input1 + input2 + input3 + input4) / 4;
    $('#total').text(input1 + input2 + input3 + input4);
    $('#ave').text(ave);

    switch (ave) {
      case 100 <= ave >= 80:
        $('#grade').text('<div bgcolor="blue">A</div>');
        break;
      case 80 < ave >= 60:
        $('#grade').text('<div bgcolor="green">B</div>');
        break;
      case 60 < ave >= 40:
        $('#grade').text('<div bgcolor="yellow">C</div>');
        break;
      case 40 < ave >= 20:
        $('#grade').text('<div bgcolor="red">D</div>');
        break;
      case 20 < ave >= 0:
        $('#grade').text('<div bgcolor="green">E</div>');
        break;
      default:
        $('#grade').text('<div>--</div>');
    }
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Input 1</th>
    <th>Input 2</th>
    <th>Input 3</th>
    <th>Input 4</th>
    <th>Total</th>
    <th>Average</th>
    <th>Grade</th>
  </tr>

  <tr>
    <td>
      <input id="input1" name="input1" size="1px" />
    </td>
    <td>
      <input id="input2" name="input2" size="1px" />
    </td>
    <td>
      <input id="input3" name="input3" size="1px" />
    </td>
    <td>
      <input id="input4" name="input4" size="1px" />
    </td>
    <td id="total"></td>
    <td id="ave"></td>
    <td id="grade"></td>
  </tr>
</table>
<div id="error"></div>

score 1 · Accepted Answer · edited May 23 '17 at 12:14

The comparison you're using for checking avg is not supported by JavaScript, in other words, you can't do 0 > avg > 1. Here's more on that matter.

Here is a working example of what you're trying to achieve.

Update: Here is a Fiddle of the same script wit all the values prepared to be saved.

$(function() {
  function evaluate() {
    var input1 = parseInt($('#input1').val(), 10);
    var input2 = parseInt($('#input2').val(), 10);
    var input3 = parseInt($('#input3').val(), 10);
    var input4 = parseInt($('#input4').val(), 10);

    if (isNaN(input1) || isNaN(input2) || isNaN(input3) || isNaN(input4)) {
      $('#error').text('Inputs must be numbers');
    } else {

      $('#error').remove();

      var message = '<div>--</div>',
        ave = (input1 + input2 + input3 + input4) / 4;
      $('#total').text(input1 + input2 + input3 + input4);
      $('#ave').text(ave);

      if (ave >= 80) {
        message = '<div class="blue">A</div>';
      } else if (80 > ave && ave >= 60) {
        message = '<div class="green">B</div>';
      } else if (60 > ave && ave >= 40) {
        message = '<div class="yellow">C</div>';
      } else if (40 > ave && ave >= 20) {
        message = '<div class="red">D</div>';
      } else if (20 > ave && ave >= 0) {
        message = '<div class="green">E</div>';
      }

      $('#grade').empty().html(message);
    }
  };

  $('.input').on('change', evaluate);
});

input {
  max-width: 50px;
}
table td {
  padding: 0 10px;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}
.red {
  background: blue;
}

<link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Input 1</th>
    <th>Input 2</th>
    <th>Input 3</th>
    <th>Input 4</th>
    <th>Total</th>
    <th>Average</th>
    <th>Grade</th>
  </tr>

  <tr>
    <td>
      <input id="input1" class="input" type="number" value="0" name="input1">
    </td>
    <td>
      <input id="input2" class="input" type="number" value="0" name="input2">
    </td>
    <td>
      <input id="input3" class="input" type="number" value="0" name="input3" />
    </td>
    <td>
      <input id="input4" class="input" type="number" value="0" name="input4">
    </td>
    <td id="total"></td>
    <td id="ave"></td>
    <td id="grade"></td>
  </tr>
</table>
<div id="error"></div>

Thanks it worked. But it didn't work when I tried to apply to a table with student rows fetch from a database table in a while loop. Each of the input field is inserted into the database using an array. I'm trying to calculate the total, average and total in the last three columns as the one above but it's not working. — Flourish, Jul 19 '15 at 17:18
@user3636615 I have posted a [Fiddle](http://jsfiddle.net/3p5htb0b/1/) with updated version of the script, please check it out. The updated version supports dynamic amount of inputs. — halfzebra, Jul 19 '15 at 17:20
Kkkk... I have checked and I have seen the updates. But I'm trying to apply to a table will rows fetched form a database. So each student will have his/her row. The name is each input field is something like exe[] but they all have the same id because is row is looped with while loop. — Flourish, Jul 19 '15 at 17:43
It only worked for the first row but didn't work for the other rows — Flourish, Jul 19 '15 at 18:50
@user3636615 Here is an example for a table with multiple rows http://jsfiddle.net/Lnmqznas/ — halfzebra, Jul 19 '15 at 20:26
Thanks it worked. But is there a way I can make the whole cell of each student grade cell coloured i.e just not just the
wrapping the grade but the grade cell itself @halfzebra — Flourish, Jul 22 '15 at 04:12
Not the whole row but but the grade cell(box). It should be similar to the other one but the whole cell or box should be coloured — Flourish, Jul 22 '15 at 10:28
@Flourish `$group.find('.grade').addClass(gradeColors[grade])` — halfzebra, Jul 22 '15 at 15:15

score 0 · Answer 2 · answered Jul 19 '15 at 12:57

If you sum values are right,which i guess you have done,change your switch to this.

     switch(ave) {
        case 100 <= ave >= 80 :
          $('#grade').css('background',"green").text('B');      
        break;
        //SIMILAR FOR OTHER CASES
    }

How to average numbers and show result dynamically

2 Answers2