從動態按鈕 Javascript 進行測試

Question

我正在尋找一種從動態創建的按鈕中獲取文本的方法。 我嘗試在創建 onclick 時分配它，它僅適用於最后一個按鈕。

我的代碼：

for (var i = 0; i < 8; i++) {
  var divnode = document.createElement("div");
  document.getElementById("container").appendChild(divnode);

  var buttonnode = document.createElement("button");
  var textnode = document.createTextNode("Some Random Text" + i);
  buttonnode.appendChild(textnode);
  buttonnode.onclick = function() {
    console.log(buttonnode.innerHTML);
  }
  document.getElementById("container").childNodes[i + 1].appendChild(buttonnode);
}

我一直在使用的小提琴： https://jsfiddle.net/tpwkzfor/

Answer 1

發生這種情況的原因是因為您在循環的每次迭代中都定義了 function。 解決此問題的方法是將 function 定義拉到循環之外，如下所示：

function printButton(event) {console.log(event.target.innerHTML)}

for (var i = 0; i < 8; i++) {
  var divnode = document.createElement("div");
  document.getElementById("container").appendChild(divnode);

  var buttonnode = document.createElement("button");
  var textnode = document.createTextNode("Some Random Text" + i);
  buttonnode.appendChild(textnode);
    buttonnode.onclick = printButton
  document.getElementById("container").childNodes[i + 1].appendChild(buttonnode);
}

Answer 2

那么修復真的很簡單。
將您的console.log(buttonnode.innerHTML)更改為console.log(this.innerHTML)

Answer 3

我發現這可以供將來參考。：

for (var i = 0; i < 8; i++) {
    var divnode = document.createElement("div");
  document.getElementById("container").appendChild(divnode);

  var buttonnode = document.createElement("button");
  var textnode = document.createTextNode("Some Random Text" + i);
  buttonnode.appendChild(textnode);
  buttonnode.id = "btnSearch" + i;
    buttonnode.addEventListener("click", function(e) {
    if(e.target && e.target.nodeName == "BUTTON") {
    console.log(document.getElementById(e.target.id).innerText);
    }});
  document.getElementById("container").childNodes[i + 1].appendChild(buttonnode);
}

Answer 4

嘗試以 e.target.innerHTML 的形式訪問 innerHTML

參考下面的代碼

 for (var i = 0; i < 8; i++) { var divnode = document.createElement("div"); document.getElementById("container").appendChild(divnode); var buttonnode = document.createElement("button"); var textnode = document.createTextNode("Some Random Text" + i); buttonnode.appendChild(textnode); //pass event as argument buttonnode.onclick = function(e){ //console e.target.innerHTML console.log(e.target.innerHTML);} document.getElementById("container").childNodes[i + 1].appendChild(buttonnode); }

 <div> <label>Test</label> <div id="container"> </div> </div>