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.
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">
<input type="radio" name="math" onclick="reset_msg();" />Addition
</label>
<input type="radio" name="math" onclick="reset_msg();" />Subtraction
<input type="radio" name="math" onclick="reset_msg();" />Multiplication
<input type="radio" name="math" onclick="reset_msg();" />Division
<br><br>
<input type="submit" value="Compute" onclick="return solve();" />
<input type="submit" value="Clear" onclick="return clear();" />
<br><br>
<div id="msg"></div>
</form>
</body>
</html>
