Addition Of Four Numbers Using JavaScript

Submitted by alpha_luna on Monday, April 11, 2016 - 12:36.

Good Day!!!

In this tutorial, we are going to learn a simple program and this is called Addition Of Four Numbers Using JavaScript. Which have HTML Form Tag to have the sum of four numbers. We have four text box to input the number to be added, one for sum button, and one for the reset button to clear the input number that the user has a new value of the number to be added. And all field is required. JavaScript Script This is the script to add the four values in a text box. 
  1. <script type="text/javascript">
  2. function four_numbers() { 
  3. var first_number = document.getElementById("box_number_1").value;
  4. var second_number = document.getElementById("box_number_2").value; 
  5. var third_number = document.getElementById("box_number_3").value;
  6. var fourth_number = document.getElementById("box_number_4").value;
  7. var result =parseInt(first_number)+parseInt(second_number) 
  8. +parseInt(third_number)+parseInt(fourth_number);
  9. var box_number_5 = document.getElementById('box_number_5');
  10. box_number_5.value=result;
  11.  } 
  12.  
  13.  function clear_box() {
  14.  document.getElementById("box_number_1").value="";	 
  15.  document.getElementById("box_number_2").value="";	 
  16.  document.getElementById("box_number_3").value="";	 
  17.  document.getElementById("box_number_4").value="";	 
  18.  }
  19. </script>
HTML Tag And, this is the HTML Tag. 
  1. <center>
  2. <h1 style="color:red;"> Addition of Four Numbers Using JavaScript</h1>
  3. <input type="number" style="width:100px; font-size:18px; text-align:center;" autofocus="autofocus" step="1" min="0" name="box_number_1" id="box_number_1" size="3"/> 
  4. <b style="color:red; font-size:18px;">+</b> 
  5. <input type="number" style="width:100px; font-size:18px; text-align:center;" step="1" min="0" name="box_number_2" id="box_number_2" size="3"/> 
  6. <b style="color:red; font-size:18px;">+</b> 
  7. <input type="number" style="width:100px; font-size:18px; text-align:center;" step="1" min="0" name="box_number_3" id="box_number_3" size="3"/> 
  8. <b style="color:red; font-size:18px;">+</b> 
  9. <input type="number" style="width:100px; font-size:18px; margin-right:10px; text-align:center;" step="1" min="0" name="box_number_4" id="box_number_4" size="3"/> 
  10.  
  11. <input type="submit" name="button_all" id="button_all1" style="font-size:18px; color:red; background:azure;" onclick="four_numbers()" value=" = " title="Click here to find the sum of four values" />
  12. <br /><br />
  13.  
  14. <h3 style="color:red;">Sum is</h3>
  15. <input type="text" style="width:100px; text-align:center; font-size:18px;" name="box_number_5" id="box_number_5" size="10" readonly="true"/>
  16. <br /><br />
  17.  
  18. <input type="submit" name="button_all" id="button_all1" style="font-size:18px; color:red; background:azure;" onclick="clear_box()" value="Reset" />
  19. </center>
Share us your thoughts and comments below. Thank you so much for dropping by and reading this blog post. For more updates, don’t hesitate and feel free to visit our website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 1259 views