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

你只需要移動提取的內容對您輸入框中輸入您單擊處理程序中的行：

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

這裏有一個fiddle

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

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

Another fiddle

Answer 2

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

Answer 3

我認爲你可以做到這一點很容易：

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