online calculator - javascript :) baffled on results..

Question

ffs82defxp 0 Junior Poster in Training

14 Years Ago

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>

javascript

Edited 14 Years Ago by ffs82defxp because: n/a

4 Contributors
21 Replies
228 Views
6 Days Discussion Span
Latest Post 14 Years Ago Latest Post by rajarajan2017

fxm 23 Posting Pro

14 Years Ago

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.

fxm 23 Posting Pro

14 Years Ago

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

fxm 23 Posting Pro

14 Years Ago

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)

fxm 23 Posting Pro

14 Years Ago

parseInt()

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

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

Edited 14 Years Ago by fxm because: n/a

fxm 23 Posting Pro

14 Years Ago

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

Reply to this topic

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.

ffs82defxp 0 Junior Poster in Training · Answer 1 · 2010-05-18T03:59:43+00:00

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.

ffs82defxp 0 Junior Poster in Training · Answer 2 · 2010-05-18T09:41:17+00:00

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

ffs82defxp 0 Junior Poster in Training · Answer 3 · 2010-05-18T11:24:00+00:00

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

ffs82defxp 0 Junior Poster in Training · Answer 4 · 2010-05-19T07:10:46+00:00

ffs82defxp 0 Junior Poster in Training

14 Years Ago

Still waiting for replies :\

thalz 0 Newbie Poster · Answer 5 · 2010-05-19T08:48:05+00:00

just wanna help...

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

}

thalz 0 Newbie Poster · Answer 6 · 2010-05-19T09:08:59+00:00

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

thalz 0 Newbie Poster · Answer 7 · 2010-05-19T09:14:32+00:00

thalz 0 Newbie Poster

14 Years Ago

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

Edited 14 Years Ago by thalz because: n/a

ffs82defxp 0 Junior Poster in Training · Answer 8 · 2010-05-19T21:16:28+00:00

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.

ffs82defxp 0 Junior Poster in Training · Answer 9 · 2010-05-20T02:42:22+00:00

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.

ffs82defxp 0 Junior Poster in Training · Answer 10 · 2010-05-20T03:14:35+00:00

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?

rajarajan2017 · Answer 11 · 2010-05-20T11:33:30+00:00

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?

ffs82defxp 0 Junior Poster in Training · Answer 12 · 2010-05-20T16:55:15+00:00

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.

fxm 23 Posting Pro · Answer 13 · 2010-05-20T18:41:28+00:00

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.

rajarajan2017 · Answer 14 · 2010-05-20T18:45:54+00:00

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!

ffs82defxp 0 Junior Poster in Training · Answer 15 · 2010-05-22T02:59:56+00:00

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

rajarajan2017 · Answer 16 · 2010-05-24T10:29:08+00:00

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