Simple Math Calculator Using Radio Button

Submitted by: 
Language: 
Visitors have accessed this post 1959 times.

Related Code: Math Calculator Using CheckBox

This is a simple program using JavaScript. And it’s called Simple Math Calculator Using Radio Button. This is a very common program, but this is suited for the beginner in JavaScript Language.

This program contains 2 textboxes where the user types for the numeric value, then 4 radio button for addition, subtraction, multiplication, and division to select the arithmetic operators. And we have 1 button to compute and 1 button for clearing the value in the textbox to solve another numeric value.

Math Operators

  • Addition
  • Subtraction
  • Multiplication
  • Division

JavaScript Source Code

This script will execute after the user controls the form field.

  1. <script>
  2. function solve() {
  3.  
  4. var operators_If = document.getElementsByName("math_Operators");
  5. var first_TextBox_Value = document.getElementById("number1_TextBox").value;
  6. var no_two = document.getElementById("number2_TextBox").value;
  7.  
  8. if (first_TextBox_Value=="") {
  9. var math_Results = "<span class='warning'>Enter the first value.</span>";
  10. document.getElementById('math_Results').innerHTML = math_Results;
  11. return false;
  12. }
  13.  
  14. else if (no_two=="") {
  15. var math_Results = "<span class='warning'>Enter the second value.</span>";
  16. document.getElementById('math_Results').innerHTML = math_Results;
  17. return false;
  18. }
  19.  
  20. if (operators_If[0].checked == true) {
  21. sum = parseInt(first_TextBox_Value) + parseInt(no_two);
  22. results = "<span class='message'> The sum of " + first_TextBox_Value
  23. + " and " + no_two + " is <b style='color:red;'>" + sum +"</b>.</span>";
  24. document.getElementById('math_Results').innerHTML = results;
  25. return false;
  26. }
  27. else if (operators_If[1].checked == true) {
  28. diff = parseInt(first_TextBox_Value) - parseInt(no_two);
  29. results = "<span class='message'> The difference between "
  30. + first_TextBox_Value + " and " + no_two + " is <b style='color:red;'>" + diff +"</b>.</span>";
  31. document.getElementById('math_Results').innerHTML = results;
  32. return false;
  33. }
  34. else if (operators_If[2].checked == true) {
  35. product = parseInt(first_TextBox_Value) *parseInt(no_two);
  36. results = "<span class='message'>The product between "
  37. + first_TextBox_Value + " and " + no_two + " is <b style='color:red;'>" + product +"</b>.</span>";
  38. document.getElementById('math_Results').innerHTML = results;
  39. return false;
  40. }
  41. else if (operators_If[3].checked == true) {
  42. quotient = parseInt(first_TextBox_Value) / parseInt(no_two);
  43. results = "<span class='message'>The quotient between "
  44. + first_TextBox_Value + " and " + no_two + " is <b style='color:red;'>" + quotient +"</b>. </span>";
  45. document.getElementById('math_Results').innerHTML = results;
  46. return false;
  47. }
  48. else {
  49. var math_Results = "<span class='warning'>Select your math operators.</span>";
  50. document.getElementById('math_Results').innerHTML = math_Results;
  51. return false;
  52. }
  53. return true;
  54. }
  55. function reset_Operators() {
  56. document.getElementById('math_Results').innerHTML = '';
  57. }
  58. function clear()
  59. {
  60. document.getElementById('math_Results').innerHTML = "";
  61. first_TextBox_Value="";
  62. no_two="";
  63. first_TextBox_Value.focus();
  64. }
  65. </script>

HTML Form Field

This form field contains textboxes, radio button, and buttons to operate this program.

  1. <form action="" method="POST">
  2. <table cellpadding="5" cellspacing="5" style="text-align:center;" width="100%" border="0">
  3. <tr>
  4. <td><label>First Value</label></td>
  5. <td><input type="number" name="first_TextBox_Value" id="number1_TextBox" autofocus="autofocus"></td>
  6. </tr>
  7. <tr>
  8. <td><label>Second Value</label></td>
  9. <td><input type="number" name="second_TextBox_Value" id="number2_TextBox"></td>
  10. </tr>
  11. <h2>Math Operators</h2>
  12. <table cellpadding="5" cellspacing="5" style="text-align:center;" width="100%" border="0">
  13. <tr>
  14. <td><input type="radio" name="math_Operators" onclick="reset_Operators();" /> <label style="color:blue;">Addition</label></td>
  15. <td><input type="radio" name="math_Operators" onclick="reset_Operators();" /> <label style="color:blue;">Subtraction</label></td>
  16. </tr>
  17. <tr>
  18. <td><input type="radio" name="math_Operators" onclick="reset_Operators();" /> <label style="color:blue;">Multiplication</label></td>
  19. <td><input type="radio" name="math_Operators" onclick="reset_Operators();" /> <label style="color:blue;">Division</label></td>
  20. </tr>
  21. <br />
  22. <br />
  23. <input type="submit" value="Solve" onclick="return solve();" />
  24. <input type="submit" value="Clear" onclick="return clear();" />
  25. <br />
  26. <br />
  27. <div id="math_Results"></div>
  28. </form>

And, the style.

  1. <style type="text/css">
  2. body{
  3. width:500px;
  4. margin:auto;
  5. border:blue 1px solid;
  6. text-align:center;
  7. }
  8. h1 {
  9. color:red;
  10. }
  11. h2 {
  12. color:blue;
  13. }
  14. label {
  15. font-size: 20px;
  16. font-weight: bolder;
  17. font-family: cursive;
  18. color: red;
  19. }
  20. input[type="number"] {
  21. font-size: 18px;
  22. border: red 1px solid;
  23. text-indent: 5px;
  24. width: 150px;
  25. }
  26. input[type="submit"] {
  27. font-size: 18px;
  28. color: red;
  29. background: azure;
  30. border: red 1px solid;
  31. padding: 6px;
  32. border-radius: 4px;
  33. cursor:pointer;
  34. }
  35. #math_Results{
  36. font-size: 23px;
  37. font-weight: bold;
  38. font-family: cursive;
  39. color: blue;
  40. }
  41. </style>

Output:

For Addition Operator.

Addition ResultFor Subtraction Operator.

Difference ResultFor Multiplication Operator.

ProductFor Division Operator.

Quotient ResultRelated Code: Math Calculator Using CheckBox

So, this is it, you have Simple Math Calculator Using Radio Button in JavaScript. Kindly click the "Download Code" button for full source code. Enjoy Coding. Hope you can learn from this.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.