The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> button input value changing after pressed?
Doodayer
post 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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Doodayer
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 17 2014, 07:05 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Frederiek @ Aug 17 2014, 12:23 PM) *

InnerHTML won't work to change the text on the button.


He isn't trying to use it for that, just for the P.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Doodayer
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 17 2014, 11:31 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Doodayer @ Aug 17 2014, 05:13 PM) *

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;


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Doodayer
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 17 2014, 02:13 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Doodayer @ Aug 17 2014, 06:55 PM) *

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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Doodayer
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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().
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 17 2014, 03:37 PM
Post #14


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Christian J @ Aug 17 2014, 09:13 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Doodayer
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Doodayer
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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;
}
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Doodayer
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:19 PM