Showing posts with label calculator using radio buttons in javascript. Show all posts
Showing posts with label calculator using radio buttons in javascript. Show all posts

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>