Tuesday 11 June 2013

Widgets

How to make A Calculator in JavaScript

Description:- In My Previous Article I Explained About How To make Slider in JavaScript,Wait for Downloading Counter,Highlight Searched Text in Gridview,Dropdown list atteched with Selection of another DropDown and many more Article on Asp.net,Css,JavaScript,Html,Jquery.Now in this article i will Explain How to create a Calculater  using JavaScript,


Demo:-



Coding:-

<html>
<head>
<title>On Page Javascript</title>
<script type="text/javascript" language="javascript">
function calc()
{
var v1 = document.getElementById("txtV1").value;
var v2 = document.getElementById("txtV2").value;
var op = document.getElementById("selOperator");
op = op.options[op.selectedIndex].value;
if(chkNumeric(v1)&&chkNumeric(v2))
{
var lbl = document.getElementById("lblAnswer");
if(op == '+')
lbl.innerHTML = parseFloat(v1) + parseFloat(v2);
else if(op == '-')
lbl.innerHTML = parseFloat(v1) - parseFloat(v2);
else if(op == '*')
lbl.innerHTML = parseFloat(v1) * parseFloat(v2);
else if(op == '/')
lbl.innerHTML = parseFloat(v1) / parseFloat(v2);
}
else
{
if(!chkNumeric(v1) && !chkNumeric(v2)) alert("Please enter Numeric Values in both Boxes.");
else if (!chkNumeric(v1)) alert("Please enter a Numeric Value in First Box.");
else if(!chkNumeric(v2)) alert("Please enter a Numeric Value in Second Box.");
}
}
function chkNumeric(v)
{
var isvalid = true;
var validletters = "0123456789.";
for(i=0;i<v.length;i++)
{
if(validletters.indexOf(v.charAt(i),0)<0)
{
isvalid = false;
break;
}
}
return isvalid;
}
</script>
</head>
<body>
<input type="text" id="txtV1"/>&nbsp;
<select id="selOperator">
<option selected="selected" value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">/</option>
</select>&nbsp;
<input type="text" id="txtV2"/>&nbsp;
<input type="button" value="=" onclick="calc()"/>&nbsp;&nbsp;
<label id="lblAnswer"></label>
</body>
</html>

0 comments:

Post a Comment