473,396 Members | 2,011 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > create an object after a button is pressed

Join Bytes to post your question to a community of 473,396 software developers and data experts.

Create an object after a button is pressed

risk32
98
Hi all,
I'm still in the beginning stages of JS, so I really don't know how to do this.
I'm trying to create a calculator, which I did, but I couldn't get the % to work.
I thought maybe I could use the operator(s) to invoke some kind of function to put what was typed into a variable and then create a new variable for the next numbers instead of just evalutating one big string at the beginning.

Here's where my head is right now:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var num[i] 
  3. num[i] = document.calc.input.value
  4. function add() {
  5. if (i > 0) {
  6.      ...
  7. }
  8.  
  9. else {
  10.      alert('There is nothing to add')
  11.      }
  12. }
  13.  
  14.  Honestly, I have no idea what I'm doing here. I'm trying to get it to create a new num when an operator button is pressed, hold the value of the text box, then clear the text box for the next number. Pretty much like a desk calculator or the one used with Windows.
  15.  
  16. </script>
  17.  
  18. <html>
  19. ( just for reference.. there's a lot more but I'm using a diff computer to type this)
  20. <form name="calc">
  21. <input type="text" name="input">
  22. <input type="button" value="+" id="operator" onClick="add()">
  23. </html>
  24.  
Does anyone know where I can find some material on how to do this or can point me in the right direction?

Thanks,
Adam
Jan 17 '10 #1
7 1848
Hi Adam,
The windows calculator stores 2 numbers - input and operator. No need for the array - you are over-complicating things.

Try doing this:
Expand|Select|Wrap|Line Numbers
  1. <html><body><form>
  2. <input type="text" name="display"><br>
  3. <input type="button" value="+" id="operator" onClick="add()">
  4. <input type="button" value="-" id="operator" onClick="minus()">
  5. <input type="button" value="X" id="operator" onClick="times()">
  6. <input type="button" value="/" id="operator" onClick="divide()">
  7. <input type="button" value="=" id="operator" onClick="equals()">
  8. </form>
  9. <script type="text/javascript">
  10. oldValue=0;
  11. operator="nothing";
  12. textField=document.forms[0].display;
  13. function add()
  14. {
  15. operator="add";
  16. oldValue=parseInt(textField.value);
  17. textField.value="";
  18. }
  19. function minus()
  20. {
  21. operator="minus";
  22. oldValue=parseInt(textField.value);
  23. textField.value="";
  24. }
  25. function times()
  26. {
  27. operator="times";
  28. oldValue=parseInt(textField.value);
  29. textField.value="";
  30. }
  31. function divide()
  32. {
  33. operator="divide";
  34. oldValue=parseInt(textField.value);
  35. textField.value="";
  36. }
  37. function equals()
  38. {
  39. if(operator=="add")
  40. {
  41. result=parseInt(textField.value)+oldValue;
  42. }
  43. else if(operator=="minus")
  44. {
  45. result=parseInt(textField.value)-oldValue;
  46. }
  47. else if(operator=="times")
  48. {
  49. result=parseInt(textField.value)*oldValue;
  50. }
  51. else if(operator=="divide")
  52. {
  53. result=parseInt(textField.value)/oldValue;
  54. }
  55. else
  56. {
  57. result=textField.value;
  58. }
  59. textField.value=result;
  60. }
  61. </script></body></html>
  62.  
I think this should work (haven't used the parseInt function in a while - it converts strings to numbers). Hope this helps.

Regards,
Lars
Jan 17 '10 #2
risk32
98
Lars,
It seems to work just fine. I'm trying to add the % function though. I know what it should look like in my head, but I can't seem to figure out using the code you gave me.
Expand|Select|Wrap|Line Numbers
  1. result = parseString(textField.value)/100 + (whatever the operator is) + oldValue;
  2.  
  3. result = eval(result)
  4.  
  5. result = parseInt(result)
  6.  
Could be wrong though...

Thanks,
Adam
Jan 17 '10 #3
Hi again,
By % you mean modulus or percent? The javascript % operator means modulus (remainder). I take it, however, that you mean percent - if you mean modulus just use % in place of + or -.

To convert a decimal to percent, the formula is d*100. So 0.56 is 56%. If you meant for a function where you input a number and a percent and figure out a percent of that number - ie 56 percent of 200 is 112 - here is the the code:
Expand|Select|Wrap|Line Numbers
  1. function percent()
  2. {
  3. operator="percent";
  4. oldValue=parseInt(textField.value);
  5. textField.value="";
  6. }
  7.  
  8. and
  9.  
  10. else if(operator=="percent")
  11. {
  12. result=parseInt(textField.value)/100*oldValue;
  13. }
  14.  
Remember to input the percent first, then the number you want to use.
Regards,
Lars
Jan 17 '10 #4
risk32
98
I get how to do it now, but it's not quite right. I added oldValue = oldValue + result to the end with the declaration being result=0. Maybe something I didn't need, but it's a piece of mind thing when I can see it. Anyways, I added some numbers together and it worked like a charm. Then I tried the percent...
5+5+10+15 (no big deal... came out to 35)
5 + 5 + 1 0 + 15 + 10% (NaN)

This what got me thinking... a calculator will display the result, even if the equals sign hasn't been pressed. Could it be possible to add a result section to the function itself that does the operation?
Jan 17 '10 #5
OK, try this:

Expand|Select|Wrap|Line Numbers
  1. oldValue=0;
  2. operator="nothing";
  3. textField=document.forms[0].display;
  4. function add()
  5. {
  6. operator="add";
  7. oldValue+=parseInt(textField.value);
  8. textField.value=oldValue;
  9. }
  10. function minus()
  11. {
  12. operator="minus";
  13. oldValue-=parseInt(textField.value);
  14. textField.value=oldValue;
  15. }
  16. function times()
  17. {
  18. operator="times";
  19. oldValue=oldValue*parseInt(textField.value);
  20. textField.value=oldValue;
  21. }
  22. function divide()
  23. {
  24. operator="divide";
  25. oldValue=oldValue/parseInt(textField.value);
  26. textField.value=oldValue;
  27. }
  28. function percent()
  29. {
  30. operator="percent";
  31. oldValue=oldValue/100*parseInt(textField.value);
  32. textField.value=oldValue;
  33. }
  34. function equals()
  35. {
  36. if(operator=="add")
  37. {
  38. result=parseInt(textField.value)+oldValue;
  39. }
  40. else if(operator=="minus")
  41. {
  42. result=parseInt(textField.value)-oldValue;
  43. }
  44. else if(operator=="times")
  45. {
  46. result=oldValue/parseInt(textField.value);
  47. }
  48. else if(operator=="divide")
  49. {
  50. result=oldValue/parseInt(textField.value);
  51. }
  52. else if(operator=="percent")
  53. {
  54. result=oldValue/100*parseInt(textField.value);
  55. }
  56. else
  57. {
  58. result=textField.value;
  59. }
  60. textField.value=result;
  61. oldValue=0;
  62. operator="nothing";
  63. }
  64.  
Think this does what you want it to.

Then test it by typing 5 X 5 X 4 % 20 = (result should be 20). Remember that to use the % sign in my calculator you input the value first (what 100% should be), then press the % sign and enter a percent, then press equals.

And by the way, sorry for posting that slightly buggy code earlier. This could actually be compacted using the eval function but it would be difficult to read. Hopefully I've at least given you the basic idea!
Jan 17 '10 #6
gits
5,390 Expert Mod 4TB
just a note: the entire code until now will only really accept integer values (for example: parseInt(2.5) = 2) in case you want to use decimal numbers then replace the parseInt() method with the parseFloat() method ... you could even add a precision handling by using some built in Math functions (round, ceil, floor) and/or the toFixed() method ...

kind regards
Jan 17 '10 #7
risk32
98
Lars,
Looks like I got it to work with some tweaking. I kind of gave up on the percent thing. Sorry for making you go through all that trouble.

The code I used to get the result to work like a normal calculator is:
Expand|Select|Wrap|Line Numbers
  1. function opAdd()
  2. {
  3. string1 = string.value
  4. operator = "+"
  5. string1 = parseFloat(string1) // thanks to gits for this one!
  6. string.value = ""
  7.  
  8. function opEquals()
  9. {
  10. if (count <= 0)
  11. {
  12. result = eval(string.value + operator + string1)
  13. string1 = string.value
  14. string.value = result
  15. }
  16.  
  17. if(count >=1)
  18. {
  19. result = eval(result + operator + string1)
  20. string.value = result
  21. }
  22.  
  23. count++
  24. }
  25.  
Thanks again for all the help Lars,
Adam
Jan 17 '10 #8

Sign in to post your reply or Sign up for a free account.

Similar topics

1
i want a simple custom hiliting button...
by: robert | last post by:
hi! I want to have a custom button change appearance when pressed and then call a function and change back to its original appearance when released. here's what i have now, which works mostly....
Javascript
3
Which button was pressed ?
by: James McGivney | last post by:
I have a project in VS.NET using C# I have a series of buttons on an aspx page. When one of the buttons is pressed, a panel becomes visible and allows the user to enter and edit data. I want to...
.NET Framework
18
Need a way to tell if a System.Windows.Forms.Button is "depressed" (pushed down)
by: jrhoads23 | last post by:
Hello, I am trying to find a way to tell if an .NET windows forms Button (System.Windows.Forms.Button) is "depressed" (pushed down). For my application, I can not use a check box control set to...
C# / C Sharp
7
Please Help! How to identify which button was clicked?
by: Amadelle | last post by:
Hi all and thanks in advance, I am stuck! I can't figure out how to identify which button was clicked on my ASP.NET page in the PostBack event? So what I am trying to do is to is to have an if...
ASP.NET
19
Figuring out which form button was pressed
by: darrel | last post by:
On my vb.net page, I have 4 sets of inputs + form buttons. example: Search: (GO) Zip: (GO) County: (GO) County: (GO) The problem is if I go to the page, type in a zip code, and hit...
ASP.NET
7
Create C# controls names at runtime
by: Matt | last post by:
Hi all, I'm trying to create a system where it reads a number of records from a database and then creates a row in the GUI that contains a single field from the database and a button that has a...
C# / C Sharp
11
How to create an automated input box.
by: cmdolcet69 | last post by:
I have the code below that will evaluate a string of characters. If its less then 12 long it will trigger a message box if its equal it will save the information and close the form. I have this...
Visual Basic .NET
4
Create Directory with VS2008
by: Robert | last post by:
Greetings New to Visual Studio 2008. Always us VB6.0 SP5. I am trying to copy files from A to B. I select a directory, and copy files. Works ok, but it does not create the directory first. ...
Visual Basic .NET
3
Tkinter, getting canvas-object, how?
by: skanemupp | last post by:
so i load a gif onto a canvas and when i click the canvs i want to get the color of the pixel that is clicked. so i need to ge the object im clicking. i was told in another thread to use...
Python
7
How do I use a timer control to show elapsed time in a label.
by: hatch | last post by:
The project I am working on has to have start and stop buttons on a form and a label to show the eslaped time once the start button is pushed. The elapsed tome should stop when the stop button is...
C# / C Sharp
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!