Wednesday, November 18, 2015

Calculator Using Radio Buttons in JavaScript

A program that I wrote the uses radio buttons to select the math operator in JavaScript that will will perform basic arithmetic operations. I include some error detection in checking for the values in our program.


If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com

My mobile number here in the Philippines is 09173084360.




Sample Program Output

Program Listing

 <html>
<head>
        <title>Basic Calculator with Radio button </title>
<style>
body,h1 {
font-family:arial;
font-size:18px;
}
label{
width: 7em;
float: left;
text-align: right;
margin-right: 0.8em;
display: block
}
  
h1 {
font-family:arial;
padding-left: 37px;
  }

  .message {
color: blue;
font-family:arial;
font-size:18px;
font-weight:bolder;
padding-left: 38px;
               }

.warning {
color: red;
font-family:arial;
font-size:18px;
   font-weight:bolder;
padding-left: 38px;
           }
</style>
    <script>
            function solve() {
                 var math_opt = document.getElementsByName("math");
 var no_one = document.getElementById("no1").value;
  var no_two = document.getElementById("no2").value;
 
if (no_one=="") {
var msg = "<span class='warning'>Give the first value.</span>";
                    document.getElementById('msg').innerHTML = msg;
return false;
}  
else if (no_two=="") {
var msg = "<span class='warning'>Give the second value.</span>";
                    document.getElementById('msg').innerHTML = msg;
return false;
}
 
                if (math_opt[0].checked == true) {
 
   sum = parseInt(no_one) + parseInt(no_two);
                    results = "<span class='message'> The sum of " + no_one 
+ " and " + no_two + " is " + sum +".</span>";
document.getElementById('msg').innerHTML = results;
return false;
                } else if (math_opt[1].checked == true) {
                     diff = parseInt(no_one) - parseInt(no_two);
                    results = "<span class='message'> The difference between "  
+ no_one + " and " + no_two + " is " + diff +".</span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } else if (math_opt[2].checked == true) {
                     product = parseInt(no_one) *parseInt(no_two);
                    results = "<span class='message'>The product between " 
+ no_one + " and " + no_two + " is " + product +".</span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } else if (math_opt[3].checked == true) {
                     quotient = parseInt(no_one) / parseInt(no_two);
                   results = "<span class='message'>The quotient between " 
  + no_one + " and " + no_two + " is " + quotient +". </span>";
   document.getElementById('msg').innerHTML = results;
return false;
                } 
else {
                    var msg = "<span class='warning'>You must select your math operator.</span>";
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                }
return true;
            }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
         }
 
 function clear()
 {
  document.getElementById('msg').innerHTML = "";
  no_one="";
  no_two="";
  no_one.focus();
 }
        </script>
    </head>
    <body>
   <br>
   <h1> Basic Calculator Using Radio Button </h1>
<br>
        <form action="" method="POST">
 <label for="first_value">
 First Value
 
 </label>
 <input type="text" name="no_one" id="no1"  size="5" autofocus>
 <br><br>
 <label for="second_value">
  Second Value
  </label>
  <input type="text" name="no_2" id="no2" size="5">
         <br><br>
            <label>Operators</label><br>
<br> <label for="radio1">
&nbsp;  &nbsp;  &nbsp;  
            <input type="radio" name="math"  onclick="reset_msg();" />Addition
            &nbsp;  &nbsp;  &nbsp;  
</label>
            <input type="radio" name="math"  onclick="reset_msg();" />Subtraction
       &nbsp;  &nbsp;  &nbsp; 
            <input type="radio" name="math"  onclick="reset_msg();" />Multiplication
             &nbsp;  &nbsp;  &nbsp;   
             <input type="radio" name="math"  onclick="reset_msg();" />Division
             &nbsp;  &nbsp;  &nbsp;   
<br><br>
&nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp; 
<input type="submit" value="Compute" onclick="return solve();" />
   &nbsp;  &nbsp;  &nbsp;  &nbsp; 
<input type="submit" value="Clear" onclick="return clear();" />
<br><br>
            <div id="msg"></div>
         </form>
    </body>
</html>

No comments:

Post a Comment