Need help in OnChange event Javascript

Question

Hi there,

I have five text fields which are mark1, mark2, mark3, mark4 and total. I have a problem to make the total automatically display in the text field. I have no problem with the calculation part. But I can't make the total to be display automatically in the text field. How can I make the total to be automatically display in the textfield once the user have finish entered all the four marks? I know it have to do with the OnChange event using Javascript. But I did not get the right codes. Does anyone can help me with this? Really need your advise.

Thank you.

Answer 1

Daisy, something like this should work. You can view a live demo of this code on JSBin.

<input type="text" name="mark1" id="mark1" value="" />
<input type="text" name="mark2" id="mark2" value="" />
<input type="text" name="mark3" id="mark3" value="" />
<input type="text" name="mark4" id="mark4" value="" />
<input type="text" name="total" id="total" value="" />

<!-- Script block must come AFTER the input elements -->

<script type="text/javascript">
  var m1    = document.getElementById('mark1'),
      m2    = document.getElementById('mark2'),
      m3    = document.getElementById('mark3'),
      m4    = document.getElementById('mark4'),
      total = document.getElementById('total');

  function calculate_total(){
    // Use your real calculation here
    total.value = Number(m1.value) + Number(m2.value) + Number(m3.value) + Number(m4.value);
  }

  if( window.addEventListener ) {
    m1.addEventListener('change', calculate_total, false);
    m2.addEventListener('change', calculate_total, false);
    m3.addEventListener('change', calculate_total, false);
    m4.addEventListener('change', calculate_total, false);
  } else if(window.attachEvent){
    m1.attachEvent('onchange', calculate_total);
    m2.attachEvent('onchange', calculate_total);
    m3.attachEvent('onchange', calculate_total);
    m4.attachEvent('onchange', calculate_total);
  }
</script>

UPDATE: Since you want a letter grade entered (A, B, C, F, etc) I would recommend a select control instead of an input[type='text']. One of the grade fields would look like this:

<select name="mark1" id="mark1">
    <option value="">Select Grade</option>
    <option value="100">A</option>
    <option value="90">B</option>
    <option value="80">C</option>
    <option value="70">D</option>
    <option value="50">F</option>
</select>

You put the number value in the value= portion, but you can display the friendlier A, B, C, etc.

And anywhere there was .value replace with .selectedValue (Except total.value of course).

Answer 2

Daisy, Doug provided a great answer, but after reading your comment I thought I would contribute a small change. Note the grades array of values and the small change to Doug's function:

// Add grades and corresponding value below
var grades = {A:100,B:70};

function calculate_total(){
  // Use your real calculation here
  total.value = grades[m1.value] + grades[m2.value] + grades[m3.value] + grades[m4.value];
}