Learning how to write a code in JavaScript is a wonderful felling why because almost all web applications uses JavaScript in their websites. In this article I will show you how to create a program using JavaScript a simple math calculator that will perform basic arithmetic operations using radio buttons to select addition, subtraction, multiplication and division operations. I also includes error trapping routines to check and block invalid entry values by our user. I hope you will find my work useful in your programming assignments and projects using JavaScript.
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>
<style>
body {
background-color:lightgreen;
font-family:arial;
font-size:25px;
color:blue;
}
label {
float: left;
width: 30%;
text-align: left;
margin-right: 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.form-field-no-caption {
margin-le
input[type="radio"]{
float:left;
}
</style>
<meta charset="UTF-8">
<title>Basic Math Calculator</title>
<script type="text/javascript">
function clear_all()
{
document.getElementById('math').value1="";
document.getElementById('math').value2="";
document.getElementById('math').value1.focus();
}
function do_math()
{
var val1 = document.getElementById('math').value1.value;
var val2 = document.getElementById('math').value2.value;
var sum = parseInt(val1) + parseInt(val2);
var subtract = parseInt(val1) - parseInt(val2);
var multiply = parseInt(val1) * parseInt(val2);
var quotient = parseInt(val1) / parseInt(val2);
if (val1=="" || val2=="") {
alert(" Text fields cannot be empty.");
document.getElementById('math').value1="";
document.getElementById('math').value2="";
document.getElementById('math').value1.focus();
}
else if(document.getElementById('1').checked && val1=="" && val2==""){
document.getElementById('math').value1="";
document.getElementById('math').value2="";
document.getElementById('math').value1.focus();
}
else if(document.getElementById('2').checked && val1=="" && val2==""){
document.getElementById('math').value1="";
document.getElementById('math').value2="";
document.getElementById('math').value1.focus();
}
else if(document.getElementById('3').checked && val1=="" && val2==""){
document.getElementById('math').value1="";
document.getElementById('math').value2="";
document.getElementById('math').value1.focus();
}
else if(document.getElementById('4').checked && val1=="" && val2==""){
document.getElementById('math').value1="";
document.getElementById('math').value2="";
document.getElementById('math').value1.focus();
}
else if (document.getElementById('1').checked) {
alert("The sum of " + val1 + " and " + val2 + " is " + sum+".");
}
else if (document.getElementById('2').checked) {
alert("The difference of " + val1 + " and " + val2 + " is " + subtract+".");
}
else if (document.getElementById('3').checked) {
alert("The product of " + val1 + " and " + val2 + " is " + multiply+".");
}
else if (document.getElementById('4').checked) {
alert("The quotient of " + val1 + " and " + val2 + " is " + quotient +".");
}
return false;
}
</script>
</head>
<body><br>
Basic Math Calculator<br><br>
<form id="math" method="post" action="#" onSubmit="do_math()" >
<label> Enter first value </label> <input type="text" name="value1" value="" > <br>
<label> Enter second value </label> <input type="text" name="value2" value="" > <br>
<br>
Arithmetic Operators
<br><br>
<input type="radio" id="1" name="optr" value="1"> <label> Addition </label><br>
<input type="radio" id="2" name="optr" value="2"><label>Subtraction</label> <br>
<input type="radio" id="3" name="optr" value="3"><label>Multiplication </label><br>
<input type="radio" id="4" name="optr" value="4"><label>Division</label><br>
<br>
<input type="submit" value="Compute"
title="Click here to see the result."/>
<input type="submit" onclick="click_all()" value="Clear"
title="Click here to clear the text fields."/>
</form>
</body>
</html>
