button input value changing after pressed? |
button input value changing after pressed? |
Doodayer |
Aug 16 2014, 05:06 PM
Post
#1
|
Group: Members Posts: 8 Joined: 16-August 14 Member No.: 21,411 |
So i have a button created using this code.
<input type="button" value="Left Trigger" onclick="leftTrigger()"> </input> What i want to happen is when it is pressed, and it calls the leftTrigger() function (which just creates a box and has you input a key value) then instead of saying "Left Trigger" the button changes its value to "Left Trigger" + lTrigger, (the variable that contains left Triggers input key value) |
pandy |
Aug 16 2014, 05:26 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Since you don't show the context I added an ID to the input. I must be able to refer to it somehow.
HTML <input id="foo" type="button" value="Left Trigger" onclick="leftTrigger()"> In your function: CODE document.getElementById('foo').value = document.getElementById('foo').value + lTrigger; Also, INPUT has no closing tag. |
Doodayer |
Aug 16 2014, 09:24 PM
Post
#3
|
Group: Members Posts: 8 Joined: 16-August 14 Member No.: 21,411 |
whenever i try to run this:
<p style="color:black" >Click a button to change its value</p> <!--LEFT TRIGGER--> <input type="button" value="Left Trigger" onclick="leftTrigger()"> <!--<p id="ltrigger"></p>--> <script> function leftTrigger() { var lTrigger = prompt("Assign a key to Left Trigger", "Enter a key"); if (lTrigger != null) { document.getElementById("ltrigger").innerHTML = lTrigger; } } </script> it works fine. but when i add your code it makes the button stop working entirely. It still shows the button, just doesn't actually work. Do i need to put it towards the end of my script? and also what id do i need to replace 'foo' with? |
pandy |
Aug 17 2014, 05:14 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You must put it after the variable is set. But the id needs to be for the button, not for the P as it is now. Now it would try to change the value of P, but P has no value so nothing happens.
|
Frederiek |
Aug 17 2014, 05:23 AM
Post
#5
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
InnerHTML won't work to change the text on the button.
Try this instead: CODE <p style="color:black">Click a button to change its value</p> <input id="ltrigger" type="button" value="Left Trigger" onclick="leftTrigger()"> <script> function leftTrigger() { var lTrigger = prompt("Assign a key to Left Trigger", "Enter a key"); if (lTrigger != null) { document.getElementById("ltrigger").value = document.getElementById("ltrigger").value + " " + lTrigger; } } </script> It takes the current input value, adds a space and the prompt value and assigns that as the button value. This post has been edited by Frederiek: Aug 17 2014, 05:26 AM |
Christian J |
Aug 17 2014, 06:21 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
As a sidenote, it might be risky to use the same variabel name "lTrigger" as the unrelated ID "ltrigger". However it seems variable names are case-sensitive in javascript so it may not matter in this case.
I recall at least older versions of MSIE used to fetch the ID of an element even without using document.getElementById(), which might cause name collisions in some situations. |
pandy |
Aug 17 2014, 07:05 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
|
Doodayer |
Aug 17 2014, 10:13 AM
Post
#8
|
Group: Members Posts: 8 Joined: 16-August 14 Member No.: 21,411 |
heres what i ended up using:
<script> function leftTrigger() { var lTrigger = prompt("Assign a key to Left Trigger", "Enter a key"); if (lTrigger != null) { document.getElementById('left1').value = document.getElementById('left1').value + " " + lTrigger; } } </script> this works really good, but there is one small bug. it doesn't replace the value of lTrigger. instead it writes out to the button "Left Trigger J" and then the next time you click it, instead of replacing "J" with another value it will write something like "Left Trigger J I" any solution for replacing it? |
Christian J |
Aug 17 2014, 11:31 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
document.getElementById('left1').value = document.getElementById('left1').value + " " + lTrigger; You might simplify that as: CODE document.getElementById('left1').value += ' ' + lTrigger; See also http://www.javascriptkit.com/jsref/assignm...operators.shtml QUOTE this works really good, but there is one small bug. it doesn't replace the value of lTrigger. instead it writes out to the button "Left Trigger J" and then the next time you click it, instead of replacing "J" with another value it will write something like "Left Trigger J I" any solution for replacing it? How about: CODE document.getElementById('left1').value = 'Left Trigger ' + lTrigger; |
Doodayer |
Aug 17 2014, 11:55 AM
Post
#10
|
Group: Members Posts: 8 Joined: 16-August 14 Member No.: 21,411 |
That works. thanks!
is there a way to get maxlength to work inside <input type="button" value="Left Trigger" onclick="ltFunction()" id="ltId"> for some reason it doesn't work, and I only want the user to be able to input 1 key This post has been edited by Doodayer: Aug 17 2014, 12:05 PM |
Christian J |
Aug 17 2014, 02:13 PM
Post
#11
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
is there a way to get maxlength to work inside <input type="button" value="Left Trigger" onclick="ltFunction()" id="ltId"> I suppose you meant in the actual javascript prompt? I don't think that's possible, but you could discard all but the first character the user has entered. Here's a good tutorial on string manipulation (including on how to get the first character): http://www.quirksmode.org/js/strings.html |
Doodayer |
Aug 17 2014, 02:37 PM
Post
#12
|
Group: Members Posts: 8 Joined: 16-August 14 Member No.: 21,411 |
he mentions in there that subst() isn't supported by version 3 browsers so should i find a different method?
|
Christian J |
Aug 17 2014, 03:34 PM
Post
#13
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
That's very old browsers that are not in use anymore (like IE3), so I wouldn't hesitate to use substr().
|
Christian J |
Aug 17 2014, 03:37 PM
Post
#14
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
I suppose you meant in the actual javascript prompt? I don't think that's possible, but you could discard all but the first character the user has entered. Or you could use a text field instead of a prompt, and add some kind of maxlength functionality to the text field. Perhaps that will give better feedback to the user than truncating his prompt input string. |
Doodayer |
Aug 17 2014, 03:43 PM
Post
#15
|
Group: Members Posts: 8 Joined: 16-August 14 Member No.: 21,411 |
what kind of text field are you proposing? It needs to be something that i can have easily accessed, and not take up large a mounts of space on the screen
|
Doodayer |
Aug 17 2014, 04:12 PM
Post
#16
|
Group: Members Posts: 8 Joined: 16-August 14 Member No.: 21,411 |
ok if you guys want to see what the web app looks like right now, heres the file for it. http://doodayer.weebly.com/uploads/3/7/6/3...839/xapper.html
i only have one more question. how can i change the exact location of something on the screen? like if i wanted the buttons to be at x = 50, y = 25 how could i make them move to a specific spot? |
pandy |
Aug 17 2014, 04:20 PM
Post
#17
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Another thing, lTrigger will never be null. It the user doesn't type anything it will still contain the phrase you've put in, "Enter a key". Well, it would be null if the user deleted that message without typing anything instead of it. I'd leave that phrase out. You already have the instruction "Assign a key to Left Trigger". That's enough.
Also, if you don't want to hardcode the original value of the button in the script, if you for instance think you will change it in the future adn don't want to have to remember to do it in several places, you can store it in a variable, but you must do that before the function so the variable is set when the page loads (i.e. it will hold the original value) and not when the function runs (the new values would keep adding up). Then use that variable when you assign the new value. CODE var lTriggerValue = document.getElementById('left1').value; function leftTrigger() { var lTrigger = prompt("Assign a key to Left Trigger", "Enter a key"); if (lTrigger != null) { document.getElementById('left1').value = lTriggerValue + " " + lTrigger; } } |
Doodayer |
Aug 17 2014, 05:07 PM
Post
#18
|
Group: Members Posts: 8 Joined: 16-August 14 Member No.: 21,411 |
how can i change the x,y value of the input button on the screen?
nevermind i figured it out and used this #ltId { position:relative; left: 150px; } thanks for all the help guys! It was really great! This post has been edited by Doodayer: Aug 17 2014, 05:14 PM |
Lo-Fi Version | Time is now: 28th March 2024 - 12:19 PM |