<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.block {
display: block;
}
</style>
</head>
<body>
<h4>Match Calculation Script.</h4>
<label>Please enter first number : </label>
<input type='text' id='firstnumber' />
<br />
<label>Please enter second number : </label>
<input type='text' id='secondnumber' />
<br />
<label class="block"><input type="radio" name="calculation" value="add">+</label>
<label class="block"><input type="radio" name="calculation" value="sub">-</label>
<label class="block"><input type="radio" name="calculation" value="mul">*</label>
<label class="block"><input type="radio" name="calculation" value="div">/</label>
<br/>
<input type="button" onclick="Calculate()" value="Calculate"></input>
<input type="button" onclick="Reset()" value="Reset"></input>
<p id="result"></p>
<script language="Javascript">
function Calculate() {
var firstnumber = document.getElementById("firstnumber");
var secondnumber = document.getElementById("secondnumber");
if(notEmpty(firstnumber, "Please enter first number")){
if(isNumeric(firstnumber, "Please enter only numeric value for first number")){
if(notEmpty(secondnumber, "Please enter second number")){
if(isNumeric(secondnumber, "Please enter only numeric value for second number")){
var options = document.getElementsByName("calculation");
var checkederr = false;
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
// do whatever you want with the checked radio
var calc = options[i].value;
}
}
if(typeof calc == "undefined"){
document.getElementById("result").innerHTML = " select the operation you want to perform";
return false;
} else {
switch(calc) {
case "add":
var ans = +(firstnumber.value) + +(secondnumber.value);
document.getElementById("result").innerHTML = "Result is : "+ans;
break;
case "sub":
var ans = +(firstnumber.value) - +(secondnumber.value);
document.getElementById("result").innerHTML = "Result is : "+ans;
break;
case "mul":
var ans = +(firstnumber.value) * +(secondnumber.value);
document.getElementById("result").innerHTML = "Result is : "+ans;
break;
case "div":
var ans = +(firstnumber.value) / +(secondnumber.value);
document.getElementById("result").innerHTML = "Result is : "+ans;
}
return true;
}
}
}
}
}
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
document.getElementById("result").innerHTML = helperMsg;
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
document.getElementById("result").innerHTML = helperMsg;
elem.focus();
return false;
}
}
function Reset() {
document.getElementById("firstnumber").value = "";
document.getElementById("secondnumber").value = "";
document.getElementById("result").innerHTML = "";
var options = document.getElementsByName("calculation");
for (var i = 0; i < options.length; i++) {
options[i].checked = false;
}
return true;
}
</script>
</body>
</html>
0 Comments