Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ button input value changing after pressed?

Posted by: Doodayer Aug 16 2014, 05:06 PM

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)

Posted by: pandy Aug 16 2014, 05:26 PM

Since you don't show the context I added an ID to the input. I must be able to refer to it somehow.

HTML

In your function:

CODE

document.getElementById('foo').value = document.getElementById('foo').value + lTrigger;

Also, INPUT has no closing tag.

Posted by: Doodayer Aug 16 2014, 09:24 PM

whenever i try to run this:
<p style="color:black" >Click a button to change its value</p>


<input 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").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?

Posted by: pandy Aug 17 2014, 05:14 AM

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.

Posted by: Frederiek Aug 17 2014, 05:23 AM

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.

Posted by: Christian J Aug 17 2014, 06:21 AM

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.

Posted by: pandy Aug 17 2014, 07:05 AM

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.

Posted by: Doodayer Aug 17 2014, 10:13 AM

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?

Posted by: Christian J Aug 17 2014, 11:31 AM

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/assignment_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;

Posted by: Doodayer Aug 17 2014, 11:55 AM

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

Posted by: Christian J Aug 17 2014, 02:13 PM

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

Posted by: Doodayer Aug 17 2014, 02:37 PM

he mentions in there that subst() isn't supported by version 3 browsers so should i find a different method?

Posted by: Christian J Aug 17 2014, 03:34 PM

That's very old browsers that are not in use anymore (like IE3), so I wouldn't hesitate to use substr().

Posted by: Christian J Aug 17 2014, 03:37 PM

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.

Posted by: Doodayer Aug 17 2014, 03:43 PM

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

Posted by: Doodayer Aug 17 2014, 04:12 PM

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/37639839/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?

Posted by: pandy Aug 17 2014, 04:20 PM

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

Posted by: Doodayer Aug 17 2014, 05:07 PM

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!