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>

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.

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.

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);

-.- 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..

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)

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..

Still waiting for replies :\

just wanna help...

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

}

parseInt()

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

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

second alert was 27???
how come 27 was the result?

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

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.

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

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.

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?

Member Avatar for rajarajan2017

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?

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.

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.

Member Avatar for rajarajan2017

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!

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);
Member Avatar for rajarajan2017

No Its give proper result without eval. May be it was an browser compatability?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.