Tutorial :Need help in OnChange event Javascript


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.


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).


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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »