global variables vs. input field value

alleyCat · March 16, 2006

Hi everyone! I'm developing a calculator using javascript. I have problem on storing the input field value for later on to refer to. That is when everytime user click on a button, that button's value would be stored in an array, when two values are collected, then perform the calculation depend on the operator been clicked.Could anybody give me idea on this?

Chocolate570 · March 16, 2006

Use this.<script type="text/javascript">function sveBut(this){x=this.value;}</script>There you go.

scott100 · March 16, 2006

Once apon a time i began re-creating the windows calculator with html/javascipt.I've never quite had time to finish or improve on it, but if it helps you out then your welcome to it

<html><head></head><body><script>function clearIt(){  document.getElementById('screen').value="";  document.getElementById('storage').value="";}function moveToStorage(){   x=document.getElementById('screen');  document.getElementById('storage').value=x.value;  x.value="";}function result(){   x=document.getElementById('screen').value;  y=document.getElementById('storage').value;x=parseFloat(x);y=parseFloat(y);sum=x+y;document.getElementById('screen').value=sum;}function update(val){  screenval=document.getElementById('screen').value;  screenval+=val;  document.getElementById('screen').value=screenval;}</script><style>.num{width:45px;color:blue;}.operator{width:45px;color:red;}</style><form><input type="text" id="screen" size="20" disabled="disabled" /><br /><br /><input class="num" type="button" value="1" onclick="update(this.value)" /><input class="num" type="button" value="2" onclick="update(this.value)" /><input class="num" type="button" value="3" onclick="update(this.value)" /><br /><input class="num" type="button" value="4" onclick="update(this.value)" /><input class="num" type="button" value="5" onclick="update(this.value)" /><input class="num" type="button" value="6" onclick="update(this.value)" /><br /><input class="num" type="button" value="7" onclick="update(this.value)" /><input class="num" type="button" value="8" onclick="update(this.value)" /><input class="num" type="button" value="9" onclick="update(this.value)" /><br /><br /><input class="operator" type="button" value="+" onclick="moveToStorage()" /><input class="operator" type="button" value="=" onclick="result()" /><input class="operator" type="button" value="C" onclick="clearIt()" /><br /><br /><br /><br /><input type="hidden" id="storage" /></form></body></html>

alleyCat · March 17, 2006

Thank you very much scott100! Your code helps me a lot. However I get an error when I tried to do similar to yours. The error is : Object expected. My code is like this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Calculator</title><style>input.btn{ color:#050; font-family:'trebuchet ms',helvetica,sans-serif; font-size:small; font-weight:bold; width: 30px; height: 30px;}</style><script type="text/javascript">//real calculator functions//declare two storage place//one for numbers, one for operators//clear screen & storage when user press "C" buttonfunction clear_screen() { document.getElementById("cal_screen").value=""; clear_storage();}function clear_storage() { document.getElementById("storage1").value = ""; document.getElementById("storage2").value = "";}//if the both storage is empty, add cal_screen value and operator to each storage,,,,,,,,,,,,,,//else update the storage1 to be the result of calculation by that operatorfunction add2storage1(op) { if(document.getElementById("storage1").value && document.getElementById("storage2").value) { document.getElementById("storage1").value = parseFloat(document.getElementById("storage1").value) document.getElementById("storage2").value parseFloat(document.getElementById("cal_screen").value); document.getElementById("storage2").value = op; } else { document.getElementById("storage1").value = document.getElementById("cal_screen").value; document.getElementById("storage2").value = op; }}//display number on the screen when user press it,,,,,,,function add2screen(val) { screenval=document.getElementById("cal_screen").value; screenval+=val; document.getElementById("cal_screen").value=screenval;}//calculate result when user press = button,function result() { document.getElementById("cal_screen").value = parseFloat(document.getElementById("storage1").value) document.getElementById("storage2").value parseFloat(document.getElementById("cal_screen").value);}</script></head><body><form name="calculator" action="" method="post" ><table><tr><td><input type = "text" name = "cal_screen" id = "cal_screen" size = "18"/> </td></tr></table><table><tr><td><input type = "button" name = "one" id = "one" value = "1" class = "btn" onClick = "add2screen(this.value)"/></td> <td><input type = "button" name = "two" id = "two" value = "2" class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "three" id = "three" value = "3" class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "add" id = "add" value = "+" class = "btn" onclick = "add2storage1(this.value)"/></td></tr><tr><td><input type = "button" name = "four" id = "four" value = "4" class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "five" id = "five" value = "5" class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "six" id = "six" value = "6" class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "minus" id = "minus" value = "-" class = "btn" onclick = "add2storage1(this.value)"/></td></tr><tr><td><input type = "button" name = "seven" id = "seven" value = "7" class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "eight" id = "eight" value = "8" class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "nine" id = "nine" value = "9" class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "time" id = "time" value = "x" class = "btn" onclick = "add2storage1(this.value)"/></td></tr><tr><td><input type = "button" name = "zero" id = "zero" value = "0" class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "point" id = "point" value = "." class = "btn" onclick = "add2screen(this.value)"/></td> <td><input type = "button" name = "eq" id = "eq" value = "=" class = "btn" onclick = "result(this.value)"/></td> <td><input type = "button" name = "divide" id = "divide" value = "/" class = "btn" onclick = "add2storage1(this.value)"/></td> <td><input type = "button" name = "clear_screen" id = "clear_screen" value = "C" class = "btn" onclick = "clear_screen()"/></td> <td><input type="hidden" id="storage1" /></td> <td><input type="hidden" id="storage2" /></td></tr></table></form></body></html>

scott100 · March 17, 2006

Fixed the object expected error, your add2storage() and add2scree() functions were a little messy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Calculator</title><style>input.btn{color:#050;font-family:'trebuchet ms',helvetica,sans-serif;font-size:small;font-weight:bold;width: 30px;height: 30px;}</style><script type="text/javascript">//real calculator functions//declare two storage place//one for numbers, one for operators//clear screen & storage when user press "C" buttonfunction clear_screen() {document.getElementById("cal_screen").value="";clear_storage();}function clear_storage() {document.getElementById("storage1").value = "";document.getElementById("storage2").value = "";}//if the both storage is empty, add cal_screen value and operator to each storage,,,,,,,,,,,,,,//else update the storage1 to be the result of calculation by that operatorfunction add2storage1(op){  if(document.getElementById("storage1").value && document.getElementById("storage2").value)   {   document.getElementById("storage1").value = parseFloat(document.getElementById("storage1").value);   document.getElementById("storage2").value = parseFloat(document.getElementById("cal_screen").value);   document.getElementById("storage2").value = op;  }  else   {   document.getElementById("storage1").value = document.getElementById("cal_screen").value;   document.getElementById("storage2").value = op;  }}//display number on the screen when user press it,,,,,,,function add2screen(val) {  screenval=document.getElementById("cal_screen").value;   screenval+=val;   document.getElementById("cal_screen").value=screenval;}//calculate result when user press = button,function result() {document.getElementById("cal_screen").value = parseFloat(document.getElementById("storage1").value); document.getElementById("storage2").value = parseFloat(document.getElementById("cal_screen").value);}</script></head><body><form name="calculator" action="" method="post" ><table><tr><td><input type = "text" name = "cal_screen" id = "cal_screen" size = "18"/> </td></tr></table><table><tr><td><input type = "button" name = "one" id = "one" value = "1" class = "btn" onClick = "add2screen(this.value)"/></td><td><input type = "button" name = "two" id = "two" value = "2" class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "three" id = "three" value = "3" class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "add" id = "add" value = "+" class = "btn" onclick = "add2storage1(this.value)"/></td></tr><tr><td><input type = "button" name = "four" id = "four" value = "4" class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "five" id = "five" value = "5" class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "six" id = "six" value = "6" class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "minus" id = "minus" value = "-" class = "btn" onclick = "add2storage1(this.value)"/></td></tr><tr><td><input type = "button" name = "seven" id = "seven" value = "7" class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "eight" id = "eight" value = "8" class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "nine" id = "nine" value = "9" class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "time" id = "time" value = "x" class = "btn" onclick = "add2storage1(this.value)"/></td></tr><tr><td><input type = "button" name = "zero" id = "zero" value = "0" class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "point" id = "point" value = "." class = "btn" onclick = "add2screen(this.value)"/></td><td><input type = "button" name = "eq" id = "eq" value = "=" class = "btn" onclick = "result(this.value)"/></td><td><input type = "button" name = "divide" id = "divide" value = "/" class = "btn" onclick = "add2storage1(this.value)"/></td><td><input type = "button" name = "clear_screen" id = "clear_screen" value = "C" class = "btn" onclick = "clear_screen()"/></td><td><input type="hidden" id="storage1" /></td><td><input type="hidden" id="storage2" /></td></tr></table></form></body></html>

alleyCat · March 17, 2006

Thank you Scott, I found out the problem, there is error in javascript in add2storage(), after I put eval() around the messy statement, then everything works

alleyCat · March 17, 2006

Sorry, another question, how do you add the scroll bars in the page so that the code is displayed in the frame?

scott100 · March 17, 2006

Sorry, another question, how do you add the scroll bars in the page so that the code is displayed in the frame?
<{POST_SNAPBACK}>

... i'm confussled

what frame? what scrollbars?

aspnetguy · March 17, 2006

The

 box...it is not in the option buttons but if you inclose your code in [*codebox*][*/codebox*] it will do that.  minus the * of course

scott100 · March 17, 2006

The
 box...it is not in the option buttons but if you inclose your code in [*codebox*][*/codebox*] it will do that.  minus the * of course
[right][post=15174][/post][/right]
haha silly me, cheers aspnetguy.Funny how u can fix the complicated stuff but when your asked a simple question...

alleyCat · March 17, 2006

let me try it

The [code] box...it is not in the option buttons but if you inclose your code in [*codebox*][*/codebox*] it will do that. minus the * of course
[right][post=15174]<{POST_SNAPBACK}>[/post][/right]

global variables vs. input field value

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in