JavaScript代碼無法正常運行

Question

我是Javascript的新手，我不知道我在用這段代碼做錯什么。 每當我運行代碼時，它都無法正常運行，並且我也不知道該如何更改。 我正在嘗試使其通過5個按鈕循環，並用用戶在輸入框中鍵入的內容替換按鈕的innerHTML。 因此，例如，如果用戶在輸入框中鍵入“ pie”並單擊按鈕4，則按鈕4的innerHTML將重命名為pie。 這是我的代碼：

var inputValue = document.getElementById("textbox").value;

function click() {
    for (var x = 1; x <= 5; x++) {
        if (this.id == "b" + x) {
            document.getElementById("b" + x).innerHTML = inputValue;
        }
    }
}

for (var i = 1; i <= 5; i++) {
    document.getElementById("b" + i).onclick = click;
}

Answer 1

for (var i = 1; i <= 5; i++) {
   document.getElementById("b" + i).onclick = function(){
         this.innerHTML = inputValue;
   };
}

Answer 2

您只需要移動將提取內容的行移到點擊處理程序內的輸入框中：

function click() {
    var inputValue = document.getElementById("textbox").value;
    for (var x = 1; x <= 5; x++) {
        if (this.id == "b" + x) {
            document.getElementById("b" + x).innerHTML = inputValue;
        }
    }
}

for (var i = 1; i <= 5; i++) {
    document.getElementById("b" + i).onclick = click;
}

這是一個小提琴

但是實際上，您根本不需要單擊處理程序中的循環。 您可以這樣做：

function click() {
    var inputValue = document.getElementById("textbox").value;
    this.innerHTML = inputValue;
}

另一個小提琴

Answer 3

我認為您可以輕松得多：

function click(){
    var inputValue = document.getElementById("textbox").value;
    this.innerHTML = inputValue;
}