0

I'm trying to make a basic online javascript calculator. I've got the css/html down, and I've created my own images in paint! Only problem is that, when you click the calculate button it says "NaN" for the result for everything i try, and when I do the delete last character image button, it changes the document.getElementById("numbers").innerHTML value to "NaN" as well.

I've tried everything but I just don't get why this is happening..

code:

calculator.html

<html>
	<head>
	<title>Online Calculator - Please refresh the page before you calculate something new</title>
	<script type="text/javascript">
		//<!--
			function addSomething(something){ /* Currently working */
				var numField = document.getElementById("numbers");
				numField.innerHTML = numField.innerHTML + something;
			}
			
			function clearLastChar(){ /* Currently not working */
				var numField = document.getElementById("numbers");
				if (numField !== null){
					var value = numField.innerHTML;
					var valueList = value.split(" ");
					numField.innerHTML = numField.innerHTML - valueList[valueList.length-2]; //should work because all its doing is minusing the last arrays value from the innerHTML
				} else { 
					return;
				}
			}
			
			function clear(){ /* Currently working */
				var numField = document.getElementById("numbers").innerHTML = "";
				var answerField = document.getElementById("answer").innerHTML = "";
			}
			
			function calculate(){ /* Currently not working */
				var numField = document.getElementById("numbers");
				var itsValue = numField.innerHTML;
				var useableValue = itsValue.replace(/ /,""); //convert the clearLastChar()-form string to one without spaces so we can calculate
				var answerField = document.getElementById("answer");
				var result = useableValue * 1; //convert innerHTML to int? - not working because its an array
				answerField.innerHTML = result;
			}
		//-->
	</script>
	<style type="text/css">
		body { margin: auto; }
		#main_wrapper {
			border: 2px solid black;
			width: 15em;
			height: 25em;
			margin: 10px 15px 10px; /* space between wrapper and images */
		}
		#numbers_area {
		}
		#number_area_text { font-family: sans-serif; }
		#numbers {
			font-size: 130%;
		}
		a { text-decoration: none; }
		img { border: none; }
		#answer { font-size: 130%; }
	</style>
	</head>
	<body>
		<center>
			<div id="main_wrapper">
				<div id="numbers_area">
					<h5 id="number_area_text">Do: </h5><span id="numbers">3 + 2 / 1</span>
				</div>
				<div id="buttons_area">
					<a href="javascript:addSomething('7 ')"><img src="http://i43.tinypic.com/1675eub.png" alt="" /></a><a href="javascript:addSomething('8 ')"><img src="http://www.freeimagehosting.net/uploads/7038538ae4.png" alt="" /></a><a href="javascript:addSomething('9 ')"><img src="http://www.freeimagehosting.net/uploads/4df713eaa2.png" alt="" /></a><a href="javascript:addSomething('/ ')"><img src="http://www.freeimagehosting.net/uploads/4eae532216.png" alt="Divide" /></a><br />
					<a href="javascript:addSomething('4 ')"><img src="http://i44.tinypic.com/2vs4zsh.png" alt="" /></a><a href="javascript:addSomething('5 ')"><img src="http://i43.tinypic.com/213kswj.png" alt="" /></a><a href="javascript:addSomething('6 ')"><img src="http://i40.tinypic.com/2ms3fwk.png" alt="" /></a><a href="javascript:addSomething('* ')"><img src="http://i42.tinypic.com/or42ux.png" alt="Multiply" /></a><br />
					<a href="javascript:addSomething('1 ')"><img src="http://i40.tinypic.com/bja4pg.png" alt="" /></a><a href="javascript:addSomething('2 ')"><img src="http://i40.tinypic.com/2cmkg8n.png" alt="" /></a><a href="javascript:addSomething('3 ')"><img src="http://i42.tinypic.com/21bodif.png" alt="" /></a><a href="javascript:addSomething('- ')"><img src="http://i40.tinypic.com/eu2dzq.png" alt="Minus" /></a><br />
					<a href="javascript:addSomething('0 ')"><img src="http://i44.tinypic.com/103ip6o.png" alt="" /></a><a href="javascript:clear();"><img src="http://i40.tinypic.com/155p9js.png" alt="Clear" /></a><a href="javascript:addSomething('. ')"><img src="http://i41.tinypic.com/nf5ow9.png" alt="decimal point" /></a><a href="javascript:addSomething('+ ')"><img src="http://i41.tinypic.com/fcr6dd.png" alt="Add" /></a><a href="javascript:clearLastChar();"><img src="http://i43.tinypic.com/mb7kb6.png" alt="Clear last number" /></a>
					<br /><input type="button" value="&nbsp;Calculate&nbsp;" onclick="javascript:calculate();" />
					<div id="answer_area">
						<span id="answer"></span>
					</div>
				</div>
			</div>
		</center>
	</body>
</html>

Edited by ffs82defxp: n/a

4
Contributors
21
Replies
22
Views
7 Years
Discussion Span
Last Post by rajarajan07
0

when you click the calculate button it says "NaN" for the result for everything

var result =useableValue * 1; //convert innerHTML to int? - not working because its an array

When first loaded, if you click "C" without clicking anything else useableValue contains the 8 character string "3+ 2 / 1" which - obviously - is NaN.

0

No, I already ruled that out.

Anything I put after I clear the value results to NaN.

Besides, 3+2/1 is not NaN, it's

3+(2/1) //two divided by one is 2
=3+2
=5

5 != NaN

---

I Just noticed that if I put a single number like "3 " it prints just fine in the value..I don't know if that's relevant.

0

No, I already ruled that out.

Anything I put after I clear the value results to NaN.

Besides, 3+2/1 is not NaN, it's

3+(2/1) //two divided by one is 2
=3+2
=5

5 != NaN

---

I Just noticed that if I put a single number like "3 " it prints just fine in the value..I don't know if that's relevant.

Oh, really?

var n="3";
alert(n*1);
n="3+ 2 / 1";
alert(n*1);
0

-.- that's because of the spaces, but I wrote a method to solve that..

function calculate(){ /* Currently not working */
				var numField = document.getElementById("numbers");
				var itsValue = numField.innerHTML;
				var useableValue = itsValue.replace(/ /,""); //convert the clearLastChar()-form string to one without spaces so we can calculate
				var answerField = document.getElementById("answer");
				var result = useableValue * 1; //convert innerHTML to int? 
				answerField.innerHTML = result;
			}

I just don't know where in there it screws up..

I'm almost sure it's where i use replace() to try and replace spaces with nothing so it eleminates the spaces..but i don't know if what im doing is valid or works..

I mean I tried

itsValue.replace(" ", "");

, but that doesnt work.

---

The whole reason I had the function called with a number+space is so that the clearLastChar() function would work.
That isn't working either..

Edited by ffs82defxp: n/a

0

that's because of the spaces

Er, no. That's because "3+ 2 / 1" is NaN.
You need to read up on the eval() method.

var n="3+ 2 / 1"
alert(n*1)
alert(eval(n)*1)
0

Er, no. That's because "3+ 2 / 1" is NaN.
You need to read up on the eval() method.

var n="3+ 2 / 1"
alert(n*1)
alert(eval(n)*1)

LOL thanks that did the trick, i was here sitting and figuring out how to replace whitespace (which by the way i did figure out).

Only problem now is the clearLastChar() method i have.

Here is the updated method:

function clearLastChar(){ /* Currently not working */
				var numField = document.getElementById("numbers");
				if (numField !== null){
					var value = numField.innerHTML;
					var valueList = value.split(""); //should house something like {"2","2","+","9"}
					numField.innerHTML = numField.innerHTML - valueList[valueList.length]; //should work because all its doing is minusing the last arrays value from the innerHTML
				} else { 
					return;
				}
			}

Basically:
1. get element of numberField
2. if not exist/is = to null, return
3. assign value to the contents of the element
4. assign valueList to as many arrays as value contains each element of the array being 1 character
5. Update contents of element to its current state minus the last member of the array

(these are notes to confirm im not crazy)

All should go fine -.- im missing something..

0

just wanna help...

function clearLastChar ()
{
document.getElementById('numbers').value+=parseInt(document.getElementById('numbers').value / 10);

}

0

parseInt()

Be careful using parseInt() in any context in which a leading zero is possible

var n="033";
alert(n);
alert(parseInt(n));

Edited by fxm: n/a

0

does it's still work? on my last post?

Edited by thalz: n/a

0

That's only going to relatively divide the mathematical value of eval() and divide it by 10.

That's not what I'm looking to do.

I need to split the value into characters and delete the outermost (newest one typed) one.

Edited by ffs82defxp: n/a

0

The value is already a string of characters: just discard the last.
Read up on the substring() method.

0

Thank you! you have been a great contributor to my thread, fxm.

I've solved my problem by updating my method to:

function clearLastChar(){ /* Currently working */
					var numField = document.getElementById("numbers");
					if (numField !== null){
						for (it = 0; it < numField.innerHTML.length; it++){
							if (it = numField.innerHTML.length){ break; }
						}
						numField.innerHTML = numField.innerHTML.substring((it+1)-it);
					} else { 
						return;
					}
				}

EDIT- I just noticed that this causes the OLDEST character inputted into numField.innerHTML to null itself out. I need the NEWEST (aka. the last character typed) to null itself..but ill figure that out myself.

Edited by ffs82defxp: n/a

0

grr..

Okay thank you! I've figured it out via substring:

if (numField.innerHTML.length > 0){
  var newVal = numField.innerHTML.substring(0,numField.innerHTML.length-1);
  numField.innerHTML = newVal;
} else { return; }

But before I figured that out, I resorted to splitting each of the string to an array and just replacing the latter most member of the array with null:

var lastTyped = numField.innerHTML.split('');
numField.innerHTML = numField.innerHTML.replace(lastTyped[lastTyped.length],""); //supposed to change innerHTML to value - last character from the right

and it didn't work, why?

Edited by ffs82defxp: n/a

0

Hint about parseInt will work only the conversion is happen for single digit

function sum()
{
	var n=parseInt("3")+parseInt("2")/parseInt("1");
	alert(n*1) //return 5
	alert(eval(n)*1) //return 5
}

But even if you have space in your string "3+2 / 1" it will accepted for eval method, then why do you gone into these eliminations spaces?

Edited by rajarajan07: n/a

0

Oh because I thought that if I just replaced the spaces with null, it would just evaluate the equation automatically when I converted the string to int..but then i realzed javascript was smarter than that.

0

Hint about parseInt will work only the conversion is happen for single digit

That is nonsense.

var n=parseInt("3")+parseInt("2")/parseInt("1");

And that is silly.

0

Non-sense and silly will not produce the proper result what you want, but it produces, so going to blame who?. Please reply in a good attitude point out the error in a good manner,and The above code is not a non-sense one when it produce outputs.

parseInt(var)
parseInt("35");
parseInt("3");

Really those statements are converting the string properly to int. then how it become silly man!! No one is genious here to point out others! Have a good attitude!

Edited by rajarajan07: n/a

0
var n=parseInt("3")+parseInt("2")/parseInt("1");

Isn't valid.

For that to work, you'd have to do something like

var result = eval(parseInt("3")+parseInt("2")/parseInt("1"));
alert(result);
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.