<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.box {
width:15px;
height:15px;
}
</style>
</head>
<body>
<script type="text/javascript">
var no1="",no2="";
var flag=0;
var flag2=0;
var already=0;
function calc(id,txt)
{
if(flag==0)
{
no1=no1+document.getElementById(id).value;
document.getElementById(txt).value=no1;
}
else if(flag==1)
{
no2=no2+document.getElementById(id).value;
document.getElementById(txt).value=no2;
}
}
function change(id)
{
if(already==0)
{
flag=1;
already=1;
var sign=document.getElementById(id).value;
if(sign=='+')
{
if(flag2==0) document.getElementById('one').value=document.getElementById('two').value;
document.getElementById('one').value=document.getElementById('one').value+"+";
flag2=1;
}
if(sign=='-')
{
if(flag2==0) document.getElementById('one').value=document.getElementById('two').value;
document.getElementById('one').value=document.getElementById('one').value+"-";
flag2=1;
}
if(sign=='*')
{
if(flag2==0) document.getElementById('one').value=document.getElementById('two').value;
document.getElementById('one').value=document.getElementById('one').value+"*";
flag2=1;
}
if(sign=='/')
{
if(flag2==0) document.getElementById('one').value=document.getElementById('two').value;
document.getElementById('one').value=document.getElementById('one').value+"/";
flag2=1;
}
document.getElementById('two').value="";
}
}
function ans(id)
{
var txt1=document.getElementById('one').value;
var no1=txt1.substr(0,txt1.length-1);
var no2= document.getElementById('two').value;
flag=3;
<!--var no2=document.getElementById('two').value;-->
<!--var txt1=document.getElementById('one').value;-->
<!--var no2=no1.substr(0,txt1.length-2);-->
no1=parseInt(no1);
no2=parseInt(no2);
if(txt1.charAt(txt1.length-1)=='+') document.getElementById('ans').value=(no1+no2);
if(txt1.charAt(txt1.length-1)=="-") document.getElementById('ans').value=(no1-no2);
if(txt1.charAt(txt1.length-1)=="*") document.getElementById('ans').value=(no1*no2);
if(txt1.charAt(txt1.length-1)=="/")
{
try
{
if(no2!=0) document.getElementById('ans').value=(no1/no2);
else document.getElementById('ans').value="Error while dividing";
}
catch(err)
{
document.getElementById('ans').value="by Zero is not possible";
}
}
}
function clear1()
{
document.getElementById('one').value="no1";
document.getElementById('two').value="no2"
document.getElementById('ans').value="answer";
no1="";
no2="";
flag=0;
flag2=0;
already=0;
}
</script>
<input type="text" id="one" readonly="readonly" value="no1"/><br />
<input type="text" id="two" readonly="readonly" value="no2"/><br />
<input type="text" id="ans" value="answer" readonly="readonly" />
<table width="30%" cellpadding="0" cellpadding="0">
<tr>
<td><input type="button" id="01" value="1" onclick="return calc(this.id,'two')"/>
<input type="button" id="2" value="2" onclick="return calc(this.id,'two')"/>
<input type="button" id="3" value="3" onclick="return calc(this.id,'two')"/>
<input type="button" id="add" value="+" onclick="return change(this.id)" />
</td>
</tr>
<tr>
<td>
<input type="button" id="4" value="4" onclick="return calc(this.id,'two')"/>
<input type="button" id="5" value="5" onclick="return calc(this.id,'two')"/>
<input type="button" id="6" value="6" onclick="return calc(this.id,'two')"/>
<input type="button" id="sub" value="-" onclick="return change(this.id)" />
</td>
</tr>
<tr>
<td>
<input type="button" id="7" value="7" onclick="return calc(this.id,'two')"/>
<input type="button" id="8" value="8" onclick="return calc(this.id,'two')"/>
<input type="button" id="9" value="9" onclick="return calc(this.id,'two')"/>
<input type="button" id="mul" value="*" onclick="return change(this.id)" />
</td>
</tr>
<tr>
<td>
<input type="button" id="c" value="C" onclick="return clear1()"/>
<input type="button" id="0" value="0" onclick="return calc(this.id,'two')"/>
<input type="button" id="equal" value="=" onclick="return ans(this.id)"/>
<input type="button" id="div" value="/" onclick="return change(this.id)" />
</td>
</tr>
</table>
</body>
</html>
Saturday, 17 March 2012
Calculator using Buttons in JavaScript
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment