Changing the value of buttons with JavaScript

Question

Whenever I click on a certain letter, I want the first slot value from the beginning to be changed to the letter value I clicked on. Is it correct that I put the letter.onclick = letterClick(this); into the for loop or should I realise it some other way. Also, what should the letterClick() function contain?

// Makes slots and letters for the chosen word.
function maker() {
    for (i=0; i<word.length; i++) {
        var slot = document.createElement("input");
        var letter = document.createElement("input");
        var letters=(shuffledWord).split("");
        slot.type = "submit";
        slot.value = "";
        slot.id = "slot" + i;
        slot.setAttribute('id', 'slot');
        letter.type = "submit";
        letter.value = letters[i];
        letter.id = "letter" + i;
        letter.onclick = letterClick(this);
        letter.setAttribute('id', 'letter');
        document.getElementById("slotbar").appendChild(slot);
        document.getElementById("letterbar").appendChild(letter);
    }
}

Creating more buttons will mean there's a greater supply with an equal demand, so the value of buttons will decrease. But if you have very few buttons then those buttons that are left will be worth a lot. If you have direct control over the supply of buttons then you can change the value that way. If not then maybe you can persuade people that buttons are awesome, thus driving up demand & price. Or try to convince them buttons suck and they shouldn't want any, thus lowering demand & price. Outside of this I'm not sure. — Claudiu
– Claudiu, Commented Oct 10, 2013 at 20:03

user2253634 · Accepted Answer · 2013-10-10 20:03:19Z

3

Not really, this refers to the context where you run the method maker. So mostly you get this as window, and you do not want to invoke the function when you bind the handler for onClick. It should be a function reference.

Try

 letter.onclick = letterClick.bind(this, letter);

Now the function will be invoked with your first argument as that letter element.

When you do

letter.onclick = letterClick(this);

it immediately invokes the function and set its result as handler, i.e if it doen't return another function ref that is the real handler, it won't work.

answered Oct 10, 2013 at 20:03

user2253634

767 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

danrodi Over a year ago

Thank you! This actually works, as it gives me the letter value in the function letterClick(), but how should I replace the slot value with the value of the letter?

user2253634 Over a year ago

@danrodi Do you mean inside the function letterClick?

user2253634 Over a year ago

You can do elem.previousElementSibling.value = 'value of letter'

Collectives™ on Stack Overflow

Changing the value of buttons with JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related