Member Avatar for ffs82defxp

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 because: n/a
  • 4 Contributors
  • 21 Replies
  • 216 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by rajarajan2017

Recommended Answers

All 21 Replies

Member Avatar for fxm

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.

Member Avatar for ffs82defxp

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.

Member Avatar for fxm

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

-.- 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 because: n/a
Member Avatar for fxm

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

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

Member Avatar for ffs82defxp

Still waiting for replies :\

Member Avatar for thalz

just wanna help...

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

}

Member Avatar for fxm

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 because: n/a
Member Avatar for thalz

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

Member Avatar for thalz

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

Edited by thalz because: n/a
Member Avatar for ffs82defxp

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 because: n/a
Member Avatar for fxm

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

Member Avatar for ffs82defxp

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 because: n/a
Member Avatar for ffs82defxp

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 because: n/a
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?

Edited by rajarajan2017 because: n/a
Member Avatar for ffs82defxp

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.

Member Avatar for fxm

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!

Edited by rajarajan2017 because: n/a
Member Avatar for ffs82defxp 
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.