DoyleChris98 Posted February 7, 2015 Share Posted February 7, 2015 I have some code that im trying to enter text into a text box with a button click. example you click button 1 and enter 1 into text box. I tried it on jsfiddle it works but just in a regular page it dosent work it gives me [object HTMLInputElement] in the text box. <html><head> <script src="jquery-1.7.1.js"></script> <script src="sprintf.js"></script> <script type="text/javascript"></script> <script>function NUMBERS(num){ var txt = document.getElementById("textfield").value; txt = txt + num; document.getElementById("textfield").value = txt; } </script></head><body><p> <input type="text" id="textfield"></p><p> <input type="button" name="no" value="1" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="2" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="3" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="4" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="5" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="6" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="7" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="8" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="9" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="0" onClick="NUMBERS(this,value)"></p></body></html> Link to comment Share on other sites More sharing options...
JamesB Posted February 7, 2015 Share Posted February 7, 2015 Change this,value to this.value in all these: <input type="button" name="no" value="1" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="2" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="3" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="4" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="5" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="6" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="7" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="8" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="9" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="0" onClick="NUMBERS(this,value)"> And if txt variable is supposed to be a number, then change: txt = txt + num; to txt = parseInt(txt) + parseInt(num); Link to comment Share on other sites More sharing options...
Ingolme Posted February 8, 2015 Share Posted February 8, 2015 The problem is that you've written NUMBERS(this,value) instead of NUMBERS(this.value) Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 8, 2015 Author Share Posted February 8, 2015 Well i made the changes that was advised but now when i press a number i get NaN in the text box. I know its a error sending the number to the textfield. Updated code <html><head> <script src="jquery-1.7.1.js"></script> <script src="sprintf.js"></script> <script type="text/javascript"></script> </head> <script> function NUMBERS(num){ var txt = document.getElementById("textfield").value; txt = parseInt(txt) + parseInt(num); document.getElementById("textfield").value = txt; } </script></head> <body><p> <input type="text" id="textfield"></p><p> <input type="button" name="no" value="1" onClick="NUMBERS(this.value)"> <input type="button" name="no" value="2" onClick="NUMBERS(this.value)"> <input type="button" name="no" value="3" onClick="NUMBERS(this.value)"> <input type="button" name="no" value="4" onClick="NUMBERS(this.value)"> <input type="button" name="no" value="5" onClick="NUMBERS(this.value)"> <input type="button" name="no" value="6" onClick="NUMBERS(this.value)"> <input type="button" name="no" value="7" onClick="NUMBERS(this.value)"> <input type="button" name="no" value="8" onClick="NUMBERS(this.value)"> <input type="button" name="no" value="9" onClick="NUMBERS(this.value)"> <input type="button" name="no" value="0" onClick="NUMBERS(this.value)"></p></body></html></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted February 8, 2015 Share Posted February 8, 2015 Check the values of txt and of num to see which of the two is causing the operation to result in NaN. Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 8, 2015 Author Share Posted February 8, 2015 Well I got it to work. But when i go to take it and use the code another way it breaks. What im doing is creating a button with CSS so when it clicks the background turns green and the letter turns black. And im using a mousedown, mouseup to change the style, then onclick to call the function. <div class="button_1" id="button_1" onMouseDown="this.style.background='#00F349'; this.style.color='#000000'" onMouseUp="this.style.background='#000000'; this.style.color='#00F349'" value="1" onclick="NUMBERS(this.value)">1</div> Link to comment Share on other sites More sharing options...
Ingolme Posted February 8, 2015 Share Posted February 8, 2015 I can't tell at a glance why that would interfere, but you could use the CSS :active selector instead of using mousedown and mouseup events: button_1:active { background-color: #00F349; color: #000;} You probably should give all your buttons the same class name and just use the ID for the unique selector. Having class="button_1" id="button_1" is redundant. You could change the class to just "button" Link to comment Share on other sites More sharing options...
davej Posted February 8, 2015 Share Posted February 8, 2015 Maybe something like... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>#output{color:green;background-color:yellow;width:200px;}[type=button]:active { background-color: #00F349; color: #000;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;}</script><script src="jquery-1.7.1.js"></script><script src="sprintf.js"></script><script>'use strict'; function NUMBERS(num){ var txt = document.getElementById("textfield").value.trim(); var txtint = parseInt(txt); if (txt.length==''){ alert('Nothing in text field'); }else if(isNaN(txtint)==true){ alert('text field does not contain a number'); }else{ var outtxt = 'The sum of '+ txtint +' and '+ num +' is '+ (txtint+parseInt(num)); document.getElementById("output").innerHTML = outtxt; }} </script></head> <body><p> <input type="text" id="textfield"/></p><p> <input type="button" name="no" value="1" onClick="NUMBERS(this.value)"/> <input type="button" name="no" value="2" onClick="NUMBERS(this.value)"/> <input type="button" name="no" value="3" onClick="NUMBERS(this.value)"/><br/> <input type="button" name="no" value="4" onClick="NUMBERS(this.value)"/> <input type="button" name="no" value="5" onClick="NUMBERS(this.value)"/> <input type="button" name="no" value="6" onClick="NUMBERS(this.value)"/><br/> <input type="button" name="no" value="7" onClick="NUMBERS(this.value)"/> <input type="button" name="no" value="8" onClick="NUMBERS(this.value)"/> <input type="button" name="no" value="9" onClick="NUMBERS(this.value)"/><br/> <input type="button" name="no" value="." onClick=""/> <input type="button" name="no" value="0" onClick="NUMBERS(this.value)"/> <input type="button" name="no" value="C" onClick=""/></p><div id="output"></div></body></html> Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 8, 2015 Author Share Posted February 8, 2015 Ill try button_1:active { background-color: #00F349; color: #000;} Will that still work with onClick event. Link to comment Share on other sites More sharing options...
Ingolme Posted February 8, 2015 Share Posted February 8, 2015 It will work if your script was working before. CSS and Javascript don't interfere with each other. Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 8, 2015 Author Share Posted February 8, 2015 (edited) What im working is a keypad to enter numbers in then pass it to a radio frequency. I have all the other code set just trying to get the numbers to line up and look good and function. Picture below. All the numbers has there own class and location on the pad. What i dont know is if i use the same class as all the numbers how do i lay them out in a keypad format. Example of CSS #button_1 { width: 80px; height: 80px; position: absolute; color: #00F349; text-align: center; border: thin solid #00F349; background-color: #000000; font-size: 50px; top: 50; left: 0; vertical-align: middle;}#button_2 { width: 80px; height: 80px; padding-top: 5px; padding-bottom: 5px; color: #00F349; font-size: 50px; text-align: center; border: thin solid #00F349; background-color: #000000; position: absolute; top: 50px; left: 80px;} Edited February 8, 2015 by DoyleChris98 Link to comment Share on other sites More sharing options...
Ingolme Posted February 8, 2015 Share Posted February 8, 2015 I see what's wrong with your code. You're using a <div> and the <div> element does not have a value attribute. That's why it stopped working. Make sure your code is valid. If it isn't then Javascript and CSS will behave unexpectedly. Check your code for validity here: http://validator.w3.org/ The first thing you have to do to make it valid is give the HTML 5 doctype to your document. You should have a class name in common between all the buttons to give them styles they all have alike and use their IDs to give them styles they have unique to them Your markup should be something like this: <div><input class="button" id="button_1" type="button" name="no" value="1" onClick="NUMBERS(this.value)"><input class="button" id="button_2" type="button" name="no" value="2" onClick="NUMBERS(this.value)"><input class="button" id="button_3" type="button" name="no" value="3" onClick="NUMBERS(this.value)"><input class="button" id="button_4" type="button" name="no" value="4" onClick="NUMBERS(this.value)"><input class="button" id="button_5" type="button" name="no" value="5" onClick="NUMBERS(this.value)"><input class="button" id="button_6" type="button" name="no" value="6" onClick="NUMBERS(this.value)"><input class="button" id="button_7" type="button" name="no" value="7" onClick="NUMBERS(this.value)"><input class="button" id="button_8" type="button" name="no" value="8" onClick="NUMBERS(this.value)"><input class="button" id="button_9" type="button" name="no" value="9" onClick="NUMBERS(this.value)"><input class="button" id="button_0" type="button" name="no" value="0" onClick="NUMBERS(this.value)"></div> The stylesheet would be like this: .button { display: block; margin: 0; padding: 0; width: 80px; height: 80px; position: absolute; color: #00F349; text-align: center; border: thin solid #00F349; background-color: #000000; font-size: 50px; vertical-align: middle;}.button:active { background-color: #00F349; color: #000;}#button_1 { top: 50px; left: 0;}#button_2 { top: 50px; left: 80px;}#button_3 { top: 50px; left: 160px;}/* . . . */ Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 8, 2015 Author Share Posted February 8, 2015 Got it ill try it tommorow. Link to comment Share on other sites More sharing options...
davej Posted February 9, 2015 Share Posted February 9, 2015 ... border: thin solid #00F349; background-color: #000000; position: absolute; top: 50px; left: 80px;} Don't do this. Don't style each individual button and don't use position absolute. Link to comment Share on other sites More sharing options...
Ingolme Posted February 9, 2015 Share Posted February 9, 2015 ... border: thin solid #00F349; background-color: #000000; position: absolute; top: 50px; left: 80px;} Don't do this. Don't style each individual button and don't use position absolute. Absolute position is OK if they're inside a container with a relative position and everything has a specific pixel size. Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 9, 2015 Author Share Posted February 9, 2015 now i cant get the numbers to appear when i press them. But if i put "1" in the textbox to begin with then when i press the one key it adds a 1 to it to make 2 then displays 2. i want it to display each number pressed and put in the new position. So you press 1 you get 1 you press 2 you get 12 i the box. <input type="text" id="INPUT" name="INPUT"><div><input class="NUM" id="B1" type="button" name="no" value="1" onClick="NUMBERS(this.value)"><input class="NUM" id="B2" type="button" name="no" value="2" onClick="NUMBERS(this.value)"><input class="NUM" id="B3" type="button" name="no" value="3" onClick="NUMBERS(this.value)"><input class="NUM" id="B4" type="button" name="no" value="4" onClick="NUMBERS(this.value)"><input class="NUM" id="B5" type="button" name="no" value="5" onClick="NUMBERS(this.value)"><input class="NUM" id="B6" type="button" name="no" value="6" onClick="NUMBERS(this.value)"><input class="NUM" id="B7" type="button" name="no" value="7" onClick="NUMBERS(this.value)"><input class="NUM" id="B8" type="button" name="no" value="8" onClick="NUMBERS(this.value)"><input class="NUM" id="B9" type="button" name="no" value="9" onClick="NUMBERS(this.value)"><input class="NUM" id="B0" type="button" name="no" value="0" onClick="NUMBERS(this.value)"><input class="NUM" id="BP" type="button" name="no" value="." onClick="NUMBERS(this.value)"><input class="NUM" id="BC" type="button" name="no" value="0" onClick="NUMBERS(this.value)"></div><div type="text" class="DISPT" id="INPUT1" name="INPUT" contenteditable="true" value="1">ENTER</div><div class="DISP1" id="COM1A" name="COM1A" onClick="CONVERT(this)">C1S</div> function NUMBERS(num){ var txt = document.getElementById("INPUT").value; txt = parseInt(txt) + parseInt(num); document.getElementById("INPUT").value = txt;} Link to comment Share on other sites More sharing options...
justsomeguy Posted February 9, 2015 Share Posted February 9, 2015 If you just want to concatenate the numbers then don't convert them to integers. If you have 2 strings and use the plus operator then it will concatenate the strings instead of adding numbers. You can also explicitly cast to a string, but that isn't necessary since they start as strings. Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 10, 2015 Author Share Posted February 10, 2015 Im taking whats entered in the box with the keypad, and going to another function to convert it to HEX, Binary, then putting it into a variable to return to a program. Link to comment Share on other sites More sharing options...
davej Posted February 10, 2015 Share Posted February 10, 2015 There would probably be a lot less need for "back and forth" Q&A if you would explain what you are doing. I mean you are entering a series of characters, but how many? You want to produce hex or binary in what format? You want the buttons to look like what? The resulting data is sent where? Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 10, 2015 Author Share Posted February 10, 2015 I'm running a game called Microsoft Flight Simulator 10 (FSX). And with the game comes a program called Simconnect. It allows programs written in C++ to change parameters in FSX. Now a person wrote a program called Websimconnect that you can write a webpage to change the parameters. And what im trying to do is make a LCD looking display to enter and change the frequencies of 11 radios. The basic thing is when you press the numbers it enters in the numbers in like a calculator screen. Then you press another button and set one of the radios. I have the communication between FSX and Websimconnect working but i cant get the keypad to work to enter the numbers. The radios are in BCD (binary coded decimal) so i need to take wats entered and convert it. That part is working but i have a alert box asking for the frequency then passes it to a function to convert it and then another that sends it to FSX. So all i need it to do is take whats entered and send it to the function. I added a picture of the page im working on. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 10, 2015 Share Posted February 10, 2015 Your code in post 16 will work if you don't convert the digits to numbers, just leave them as strings. At the end get the value from the INPUT element and that will be the string of digits that you can convert to a number, then to binary. Link to comment Share on other sites More sharing options...
DoyleChris98 Posted February 10, 2015 Author Share Posted February 10, 2015 Ok thats do able Justsomeguy, but the problem im having is passing the value from the button press to the display, and storing it then adding the next number to the display. So i press 1 displays 1 then press 2 and it displays 12 press period and 12. is displayed. But the code in post #16 gives me a NAN with the first number pressed, but if i put 1 in to begin it adds what is pressed to 1. So you enter 1 then press 2 you should get 12 but you get 3. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 10, 2015 Share Posted February 10, 2015 I know, that's because you're converting to numbers. Don't convert to numbers and it will concatenate strings instead of add. Link to comment Share on other sites More sharing options...
davej Posted February 11, 2015 Share Posted February 11, 2015 I'd suggest an "erase the last digit" button. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now