I'm a new js learner. I'm trying to create a javascript calculator. I can't get my clear button or my +/- button to work. Code is below. Any suggestions?
JS & HTML are below.
function appendMe(val)
{
//alert(val);
document.getElementById("disp").value+=val;
}
function clearAll()
{
//alert();
document.getElementById("disp").value=0;
}
function checkBrowser()
{
alert("checking");
document.getElementById("warning").style.display='none';
}
function Dot() //PUT IN "." if appropriate.
//alert(val);
if(document.getElementById("disp").value=='0')
{
document.getElementById("disp").value=val;
}
else if(val=='.' && document.getElementById("disp").value.indexOf('.')>-1) /do nothing, because we already have a decimal point
{
}
else /in any other case, we just append
{
document.getElementById("disp").value+=val;
}
function PlusMinus()
{
if (Current.indexOf("e") != -1) //if there is an exponent:
{ var epos = Current.indexOf("e-");
if (epos != -1)
{ Current = Current.substring(0,1+epos) + Current.substring(2+epos); //clip -ve exp
} else
{ epos = Current.indexOf("e");
Current = Current.substring(0,1+epos) + "-" + Current.substring(1+epos); //insert
};
} else //there is NO exponent:
{ if ( Current.indexOf("-") == 0 )
{ Current = Current.substring(1);
} else
{ Current = "-" + Current;
};
};
document.getElementById("disp").value=(document.getElementById("disp").value*-1);
document.Calculator.Display.value = Current;
function setOp(val)
{
//first, set aside the initial value as entered
document.getElementById("param1").value=document.getElementById("disp").value;
//next, clear out that first number entered
document.getElementById("disp").value=0;
//finally, store the operation
document.getElementById("operator").value=val;
}
function calcMe()
var param1 = document.getElementById("param1").value;
var operator = document.getElementById("operator").value;
var param2 = document.getElementById("disp").value;
document.getElementById("disp").value = eval(param1+operator+param2);
function isNum()
{
//start as true
var isN = true;
if(isNaN(document.getElementById("disp").value))
{
isN=false;
alert("Non-numeric Data!");
}
return isN;
}
if(isNum())
{
proceed with programming
}
function set_getMem()
{
if(isNum())
{
if(the mem value =='0') //nothing in there, so set it
{
mem value = display value;
}
else //something in there, so display it
{
display value = memory value;
}
}
}
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="<head>
<title>The Desktop Calculator</title>
<link rel="stylesheet" type="text/css" href="calc.css" />
<script type="text/javascript" src="calc.js"></script>
</head>
<body onLoad='checkBrowser()'>
<form id='calcForm'>
<div id='calc'>
<div id='display'>
<input type='text' name='disp' id='disp' class='disp' size='36' value='0'>
</div>
<div id='buttons'>
<div class='row'>
<input type='button' value='7' onClick="appendMe(this.value)"/>
<input type='button' value='8' onClick="appendMe(this.value)"/>
<input type='button' value='9' onClick="appendMe(this.value)"/>
<input type='button' value='/'/>
<input type='button' value='CE'/>
</div>
<div class='row'>
<input type='button' value='4' onClick="appendMe(this.value)"/>
<input type='button' value='5' onClick="appendMe(this.value)"/>
<input type='button' value='6' onClick="appendMe(this.value)"/>
<input type='button' value='*' onClick="appendMe('*')"/>
<input type='button' value='C'/>
</div>
<div class='row'>
<input type='button' value='1' onClick="appendMe(this.value)"/>
<input type='button' value='2' onClick="appendMe(this.value)"/>
<input type='button' value='3' onClick="appendMe(this.value)"/>
<input type='button' value='-' onClick="appendMe('-')/>
<input type='button' value='M'/>
</div>
<div class='row'>
<input type='button' value='0'onClick="appendMe(this.value)"/>
<input type='button' value='+/-'/>
<input type='button' value='.' onClick="appendMe(.)"/>
<input type='button' value='+'onClick="appendMe(+)"/>
<input type='button' value='='onClick="appendMe(=)"/>
</div>
<div id='warning'>Your Browser Can't Handle the Truth!</div>
<input type='hidden' id='param1' value='0' onClick="setOp(this.value)" />
<input type='hidden' id='operator' value='' onClick="setOp(this.value)" />
</div>
</form>
</body>
</html>
CSS:
#calc {width:255px; border:8px ridge #A9A9A9; background-color:#EDEDED}
#display {text-align:right;}
.disp {text-align:right;border:1px solid #000000; padding:2px; margin:2px;}
.row {width:100%; text-align:right;}
#calc #buttons .row input {border:1px solid #000000; width:40px; padding:2px; margin:2px;}
#warning {color:red; font-size:2em; z-index:1; position:absolute; left: 10px; top: 40px; border:2px solid red;}
JS & HTML are below.
function appendMe(val)
{
//alert(val);
document.getElementById("disp").value+=val;
}
function clearAll()
{
//alert();
document.getElementById("disp").value=0;
}
function checkBrowser()
{
alert("checking");
document.getElementById("warning").style.display='none';
}
function Dot() //PUT IN "." if appropriate.
//alert(val);
if(document.getElementById("disp").value=='0')
{
document.getElementById("disp").value=val;
}
else if(val=='.' && document.getElementById("disp").value.indexOf('.')>-1) /do nothing, because we already have a decimal point
{
}
else /in any other case, we just append
{
document.getElementById("disp").value+=val;
}
function PlusMinus()
{
if (Current.indexOf("e") != -1) //if there is an exponent:
{ var epos = Current.indexOf("e-");
if (epos != -1)
{ Current = Current.substring(0,1+epos) + Current.substring(2+epos); //clip -ve exp
} else
{ epos = Current.indexOf("e");
Current = Current.substring(0,1+epos) + "-" + Current.substring(1+epos); //insert
};
} else //there is NO exponent:
{ if ( Current.indexOf("-") == 0 )
{ Current = Current.substring(1);
} else
{ Current = "-" + Current;
};
};
document.getElementById("disp").value=(document.getElementById("disp").value*-1);
document.Calculator.Display.value = Current;
function setOp(val)
{
//first, set aside the initial value as entered
document.getElementById("param1").value=document.getElementById("disp").value;
//next, clear out that first number entered
document.getElementById("disp").value=0;
//finally, store the operation
document.getElementById("operator").value=val;
}
function calcMe()
var param1 = document.getElementById("param1").value;
var operator = document.getElementById("operator").value;
var param2 = document.getElementById("disp").value;
document.getElementById("disp").value = eval(param1+operator+param2);
function isNum()
{
//start as true
var isN = true;
if(isNaN(document.getElementById("disp").value))
{
isN=false;
alert("Non-numeric Data!");
}
return isN;
}
if(isNum())
{
proceed with programming
}
function set_getMem()
{
if(isNum())
{
if(the mem value =='0') //nothing in there, so set it
{
mem value = display value;
}
else //something in there, so display it
{
display value = memory value;
}
}
}
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="<head>
<title>The Desktop Calculator</title>
<link rel="stylesheet" type="text/css" href="calc.css" />
<script type="text/javascript" src="calc.js"></script>
</head>
<body onLoad='checkBrowser()'>
<form id='calcForm'>
<div id='calc'>
<div id='display'>
<input type='text' name='disp' id='disp' class='disp' size='36' value='0'>
</div>
<div id='buttons'>
<div class='row'>
<input type='button' value='7' onClick="appendMe(this.value)"/>
<input type='button' value='8' onClick="appendMe(this.value)"/>
<input type='button' value='9' onClick="appendMe(this.value)"/>
<input type='button' value='/'/>
<input type='button' value='CE'/>
</div>
<div class='row'>
<input type='button' value='4' onClick="appendMe(this.value)"/>
<input type='button' value='5' onClick="appendMe(this.value)"/>
<input type='button' value='6' onClick="appendMe(this.value)"/>
<input type='button' value='*' onClick="appendMe('*')"/>
<input type='button' value='C'/>
</div>
<div class='row'>
<input type='button' value='1' onClick="appendMe(this.value)"/>
<input type='button' value='2' onClick="appendMe(this.value)"/>
<input type='button' value='3' onClick="appendMe(this.value)"/>
<input type='button' value='-' onClick="appendMe('-')/>
<input type='button' value='M'/>
</div>
<div class='row'>
<input type='button' value='0'onClick="appendMe(this.value)"/>
<input type='button' value='+/-'/>
<input type='button' value='.' onClick="appendMe(.)"/>
<input type='button' value='+'onClick="appendMe(+)"/>
<input type='button' value='='onClick="appendMe(=)"/>
</div>
<div id='warning'>Your Browser Can't Handle the Truth!</div>
<input type='hidden' id='param1' value='0' onClick="setOp(this.value)" />
<input type='hidden' id='operator' value='' onClick="setOp(this.value)" />
</div>
</form>
</body>
</html>
CSS:
#calc {width:255px; border:8px ridge #A9A9A9; background-color:#EDEDED}
#display {text-align:right;}
.disp {text-align:right;border:1px solid #000000; padding:2px; margin:2px;}
.row {width:100%; text-align:right;}
#calc #buttons .row input {border:1px solid #000000; width:40px; padding:2px; margin:2px;}
#warning {color:red; font-size:2em; z-index:1; position:absolute; left: 10px; top: 40px; border:2px solid red;}
