使用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);
    }
}

Answer 1

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, ie if it doen't return another function ref that is the real handler, it won't work.