Jump to content

Enter text with onclick.


DoyleChris98
 Share

Recommended Posts

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

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

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

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

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

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

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

post-179939-0-08762300-1423427008_thumb.jpg

Edited by DoyleChris98
Link to comment
Share on other sites

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

 

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

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

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

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

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.

post-179939-0-77872700-1423603633_thumb.jpg

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...