从动态按钮 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>