JavaScript Calculator Trouble

t.q · #1 (**permalink**) 06-28-06, 03:26 AM

This is My calculator i built for a project at school, But it has some major flaws in it and kinda looking for help..

****** decimals dont work 2.4 + 2.4 = 4

****** no negative decimals

****** cant have a decimal after plusing 2.2 + 0.1

****** Double minus kinda goes weird

Any help will be greatly appreciated

Code:

<HTML>
<HEAD>
	<SCRIPT language="Javascript">
	<!--
	
	var tdDisplay;
	var clrDisplay;		
	var xreg;			
	var opWait;
	var zer;
	var sign;
	
	function initPage()	{
		tdDisplay=document.getElementById("display");
		tdDisplay.innerHTML="0";
		clrDisplay=1;
		opWait="";
		zer="0.";
		sign="-1";
	}
	
	function buttonclick(button) {
		if (clrDisplay==1) {
		xreg=tdDisplay.innerHTML;
		tdDisplay.innerHTML="";
		clrDisplay=0;
	}

		tdDisplay.innerHTML=tdDisplay.innerHTML + button;
	}
	
	function opClick(button){
		switch (opWait) {
		case"+":
		tdDisplay.innerHTML=parseInt(xreg) + parseInt(tdDisplay.innerHTML);
		break;
		case"-":
		tdDisplay.innerHTML=parseInt(xreg) - parseInt(tdDisplay.innerHTML);
		break;
		case"*":
		tdDisplay.innerHTML=parseInt(xreg) * parseInt(tdDisplay.innerHTML);
		break;
		case"/":
		tdDisplay.innerHTML=parseInt(xreg) / parseInt(tdDisplay.innerHTML);
		break;
		case"sign":
		tdDisplay.innerHTML=parseInt(tdDisplay.innerHTML) * parseInt(sign);
		break;
	}
		opWait=button;
		clrDisplay=1;
	}
	
	function allClear(button) {  
		tdDisplay.innerHTML="0";
		clrDisplay=1;
		xreg="";
	}
		
	function reset(button) {  
		tdDisplay.innerHTML="0";
		clrDisplay=0;
	}
	
    function decpoint(button) {
		if (tdDisplay.innerHTML==0)	{
		tdDisplay.innerHTML=zer;
		clrDisplay=0;
	}
		if (tdDisplay.innerHTML.indexOf(".")>-1)	{
		button = "";
	}
		tdDisplay.innerHTML=tdDisplay.innerHTML + button;
	}
	
	
	-->
	</SCRIPT>

<TITLE>
</TITLE>
</HEAD>
<BODY style="color:white" onload="initPage()">
	<table align=center width=30% Height=60% border=2 bgcolor=black>
		<tr>
			<td>
				<table border=2 width=100% height=100% cellpadding=8 bgcolor=blue>
					<tr align=center>
						<td  height=58 colspan=4 width=100% align=right id="display">
						
						</td>
					</tr>
					<tr align=center>
						<td>
							<input type=button value="  AC  " onclick="allClear('AC')" />
						</td>
						<td>
							<input type=button value="  C  " onclick="reset('C')" />
						</td>
						<td>
							<input type=button value="  -/+  " onclick="opClick('sign')" />
						</td>
						<td>
							<input type=button value="  +  " onclick="opClick('+')" />
						</td>
					</tr>
					<tr align=center>
						<td>
							<input type=button value="  7  " onclick="buttonclick('7')" />
						</td>
						<td>
							<input type=button value="  8  " onclick="buttonclick('8')" />
						</td>
						<td>
							<input type=button value="  9  " onclick="buttonclick('9')" />
						</td>
						<td>
							<input type=button value="  -  " onclick="opClick('-')" />
						</td>
					</tr>
					<tr align=center>
						<td>
							<input type=button value="  4  " onclick="buttonclick('4')" />
						</td>
						<td>
							<input type=button value="  5  " onclick="buttonclick('5')" />
						</td>
						<td>
							<input type=button value="  6  " onclick="buttonclick('6')" />
						</td>
						<td>
							<input type=button value="  /  " onclick="opClick('/')" />
						</td>
					</tr>
					<tr align=center>
						<td>
							<input type=button value="  1  " onclick="buttonclick('1')" />
						</td>
						<td>
							<input type=button value="  2  " onclick="buttonclick('2')" />
						</td>
						<td>
							<input type=button value="  3  " onclick="buttonclick('3')" />
						</td>
						<td>
							<input type=button value="  *  " onclick="opClick('*')" />
						</td>
					</tr>
					<tr align=center>
						<td>
							<input type=button value="  0  " onclick="buttonclick('0')" />
						</td>
						<td>
							<input type=button value="  .  " onclick="decpoint('.')" />
						</td>
						<td colspan=2>
							<input type=button value="  =  " onclick="opClick('=')" />
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

</BODY>
</HTML>

TwoD · #2 (**permalink**) 06-28-06, 02:38 PM

You can't use decimals because you use parseInt, which by definition treats your numbers as Integers.
Use parseFloat to get a Float type instead. (That is a number where the decimal sign floats around and can be in any location).
One thing to note is that if JavaScript encounters a string beginning with 0, it might convert this string into an octal number (base 8) instead of a decimal number (base 10). To force base 10, do parseFloat(theString, 10).

You can also simplify the code slightly by removing the quotes around numbers in calls to buttonclick(). JS will automatically treat numbers as strings if they are added to other strings.
You can also replace

Code:

tdDisplay.innerHTML=tdDisplay.innerHTML+somethingElse
with
tdDisplay.innerHTML+=somethingElse