JavaScript Calculator Using Objects

Page 1 of 1

1 Replies - 944 Views - Last Post: 15 October 2012 - 07:05 AM

#1 SeanM  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 13-October 12

JavaScript Calculator Using Objects

Posted 13 October 2012 - 06:01 AM

I am slightly new to Javascript and I have been working on one piece of code for a week now and about ready to give up. It is a basic calculator with add, subtract, multiply, divide, reset, and equals. The calculator also inputs numbers 0-9 from the keyboard. To practice coding I decided to try to use an object to do the calculations. Unfortunately, the program fails to run as hoped. The numbers from keyboard half-way work (only inputs one and replaces it every time new number is entered) and the calculate object does absolutely nothing. I have a script assigned to every number button that should input the number entered + any new ones from either keyboard or button and make sure that if the input box is at default, it gets replaced with the first number when clicked or pressed.
Here is my Javascript Code
function calc (add, sub, div, mult, loop, equals, num1, num2) {
	this.add = add;
	this.sub = sub;
	this.div = div;
	this.mult = mult;
	this.loop = loop;
	this.equals = equals;
	this.num1 = num1;
	this.num2 = num2;
};

function pushThem(buttonValue) {
	if(document.getElementById('inputArea').value == "0.") {
		num1 = parseInt(buttonValue);
		document.getElementById('inputArea').value = num1;
	}
	else {
		if(document.getElementById('inputArea').value != "0.") {
			num2 = parseInt(buttonValue);
			}
		else {
			document.getElementById('inputArea').value = num1 + "" + num2;
		
			document.getElementById('inputArea').value = num1 + "" + num2 + "" + buttonValue;
			}
};

function notEmpty() {
	if(document.getElementById('inputArea').value == "0.") {
		document.getElementById('inputArea').value = buttonValue;
	}
	else {
		document.getElementById('inputArea').value += buttonValue;
	}
};

function resetAll() {
	document.getElementById('inputArea').value = "0.";
};
			
function negateIt(buttonValue) {
	if (document.getElementById('inputArea').value == "0." || document.getElementById('inputArea').value == "0") {
		document.getElementById('inputArea').value = document.getElementById('inputArea').value;
	}
	else {
		document.getElementById('inputArea').value = "-" + document.getElementById('inputArea').value;
	}
};

function myCalc(add, sub, div, mult, loop, equals){	
var myCalc = new calc(add, sub, div, mult, loop, equals);
if(buttonValue == '+') {
	myCalc.add(eval(document.getElementById('inputArea').value);
}
else {
	if(buttonValue == '-') {
		myCalc.sub(eval(document.getElementById('inputArea').value);
	}
	else if(buttonValue == '/') {
		myCalc.div(eval(document.getElementById('inputArea').value);
	}
	else if(buttonValue == '*') {
		myCalc.mult(eval(document.getElementById('inputArea').value);
	}
	else if(buttonValue == 'L') {
		myCalc.loop(eval(document.getElementById('inputArea').value) + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10);
		}
	else if(buttonValue == '=') {
		myCalc.equals();
		}
}
};


Here is the HTML portion
<html>
<title>Calculator</title>
<script type ="text/javascript" src="Assign2_3.js">
</script>
	<style type="text/css">
		#calc
		{
			border: 1px solid #000000;
			background-color: #aeaeae;
		}
		.button 
		{
			text-align: center;	
			border: 1px solid #000000;
		}
		.input
		{
			text-align: right;
			border: 1px solid #000000;
			width: 100%;
			background-color: #FFFFFF;
		}
		.empty
		{
			border: 1px solid #000000;
			background-color: #aeaeae;
		}
	</style>

<head>
<center><b><font size="+2">Calculator</font></b></center>
<p><center><font size="+2"><b>Means, Sean</b></font></center></p>
</head>
<script type="text/javascript">

function enterNum(the_key)
{
    if (! the_key)
    { 
       var the_key = event.keyCode;
    }
	else {
		if(the_key < 48 || the_key > 57) {
		}
		else if(the_key >= 48 || the_key <= 57){
			document.Form1.inputArea.value = String.fromCharCode(the_key);
		}
	}
};

</script>
<body onload = "resetAll();" onkeypress = "enterNum(event.which)">	
	<form name="Form1">
	<table align="center" id="calc">
		<tr>
		<td>
			<table class="calc">
			<tr>
				<td colspan="4"><input type="number" class="input" value="0." id="inputArea" readonly="true" onkeypress="notEmpty();"></td>
			</tr>

			<tr>
				<td class="button"><input id="num7" type="button" value=7 onclick="pushThem('7');"></td>
				<td class="button"><input id="num8" type="button" value=8 onclick="pushThem('8');"></td>
				<td class="button"><input id="num9" type="button" value=9 onclick="pushThem('9');"></td>
				<td class="button"><input id="/" type="button" value='/' onclick="myCalc.div();"></td>
			</tr>
			<tr>
				<td class="button"><input id="num4" type="button" value=4 onclick="pushThem('4');"></td>
				<td class="button"><input id="num5" type="button" value=5 onclick="pushThem('5');"></td>
				<td class="button"><input id="num6" type="button" value=6 onclick="pushThem('6');"></td>
				<td class="button"><input id="*" type="button" value='*' onclick="myCalc.mult();"></td>
			</tr>
			<tr>
				<td class="button"><input id="num1" type="button" value=1 onclick="pushThem('1');"></td>
				<td class="button"><input id="num2" type="button" value=2 onclick="pushThem('2');"></td>
				<td class="button"><input id="num3" type="button" value=3 onclick="pushThem('3');"></td>
				<td class="button"><input id="-" type="button" value='-' onclick="myCalc.sub();"></td>
			</tr>
			<tr>
				<td class="button"><input id="num0" type="button" value=0 onclick="pushThem(this.value);"></td>
				<td class="button"><input id="N" type="button" value='N' onclick="negateIt(this.value);"></td>
				<td class="button"><input id="L" type="button" value='L' onclick="myCalc.loop();"></td>
				<td class="button"><input id="+" type="button" value='+' onclick="myCalc.add();"></td>
			</tr>
			<tr>
				<td class="empty"><div></div></td>
				<td class="empty"><div></div></td>
				<td class="button"><input id="=" type="button" value='=' onclick="doTheMath(document.getElementById('inputArea').value);"></td>
				<td class="button"><input id="C" type="reset" value='C' onclick="pushThem(this.value);"></td>
			</tr>
			</table>
		</td>
		</tr>
	</table>
	</form>
	
<script type="text/javascript">
	function newInfo(info){
		var myInfo= "<p><b>Instructions:</b></p><p>Click a number, then an action, then another number, then the equals button.</p><p>Press 'C' when ready to start over.</p><p>The 'N' buton makes your previous number a negative.</p><p>The 'L' button requires one number to be available,</p><p> it will loop through 'that number' to 'ten plus that number'</p><p> and add all values and display.</p><p>For Example: 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55";
		instruct.innerHTML = myInfo;
		};
</script>
	
	<center><a onmouseover= "newInfo();"><span id="instruct">Mouse over for instructions.</span></a>
	
	<p><b>Navigator Info</b></p>
	<span id="navInfo"></span>

<script>
txt= "<p>App Name: " + navigator.appName + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>User Agent: " + navigator.userAgent + "</p>";

document.getElementById("navInfo").innerHTML=txt;

</script>
	
</body>
</html>


Any ideas of what needs to change? Please keep in mind that I am not an expert and I do not want to go above and beyond at least beginner-intermediate level. Thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript Calculator Using Objects

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: JavaScript Calculator Using Objects

Posted 15 October 2012 - 07:05 AM

Quote

Any ideas of what needs to change?

lots.

let’s start with input validation. line #46 does no allow more than one input character. += would help. then the validation itself, i’d just test if the resulting string would qualify as number. e.g. 1.5E+9 is a valid number in JS, though it wouldn’t pass your validation.

next for the calc object. the first question is "what should that object represent?". once you have a clear idea of that, you can proceed. currently, 3 out of 7 properties make sense to me.

and than the object handling. using eval() is not an option, period. you also have a lot of issues related to scope. the Error Console would have an extensive list of it.

as an example, take myCalc. on line #84 you call myCalc.add(). unfortunately, the myCalc object is that from line #50 (yes, functions are objects, too), not the intended one from line #51 (which is not available outside the myCalc() function). additionally neither of those objects posess an .add() method (the latter one posseses such a property, but that one’s not a function either).

currently, the best you can do is delete all and start anew.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1