从使用JavaScript创建的按钮获取ID

Question

所以我通过javascript动态创建几个按钮。

function dobutton() {
    for (i=0; i<eigenschaften; i++){
    var btn = document.createElement("BUTTON");
    btn.className = 'button black';
    btn.id = eigenschaftsarray[i];
    btn.name = 'pickbutton';
    btn.innerHTML = eigenschaftsarray[i].split("_").join(" ");
    document.getElementById('auswahl').appendChild(btn);
    document.getElementById('auswahl').innerHTML += " ";
    }
}

特征= 39

eigenschaftsarray =只是一些名字

现在我想获取我点击的按钮的ID。由于我使用js创建这些按钮的方法，我无法从这个JavaScript - onClick to get the ID of the clicked button运行中得到任何东西。将onClick事件添加到我的代码中即刻警告39“未知”。

有人可以给我一些帮助，我只是使用Javascript，没有jQuery :)

谢谢！

Answer 1

当您动态创建元素时，您必须记住，只有在DOM中可用事件之后才能将事件绑定到它们。

这是一个工作演示：jsfiddle demo

在演示中，我们将事件侦听器（“click”）绑定到包含按钮的父级。父是一个静态元素，已经在DOM中可用。

JavaScript代码是：

var eigenschaften = 3;
var eigenschaftsarray = ["b0","b1","b2"];
// fn: detect if a button was clicked -> get id
function buttonClick(e){
  // check if the clicked element is a button
  if (e.target.tagName.toLowerCase() == "button") {
    var btn = e.target;
    // alert the user what button was clicked
    alert("button id="+btn.id);
  }
}
// fn: create buttons dynamically
function dobutton() {
    // identify parent
    var parent = document.getElementById('auswahl');
    // create buttons dynamically
    for (i=0; i<eigenschaften; i++){
        var btn = document.createElement("button");
        btn.className = 'button black';
        btn.id = eigenschaftsarray[i];
        btn.name = 'pickbutton';
        btn.innerHTML = eigenschaftsarray[i].split("_").join(" ");
        // append btn to parent
        parent.appendChild(btn);
        parent.innerHTML += " ";
    }
    // add "click" listener on parent
    parent.addEventListener("click", buttonClick);
}
// create buttons
dobutton();

Answer 2

第1步：动态添加按钮到DOM

HTML：

<body>
    <h1>
        HelloWorld HelloWorld
    </h1>
    <div id="stackMe"></div>
</body>

Javascript：

const data = [{'Name' : 'Hello', 'Id' : 1},
               {'Name' : 'World', 'Id' : 2}];
window.addEventListener('DOMContentLoaded', function (){
    console.log('DOM loaded');
    generateButtons(data);
});

function generateButtons(data) {
  const buttonResults = data.map(bt =>`<button id= "${bt.Id}" onClick="btClicked(${bt.Id})">Button ${ bt.Name }</button>`);
  document.getElementById("stackMe").innerHTML = buttonResults;
}

第2步：为单击的按钮添加事件侦听器

function btClicked(currentId) {
  let elementClicked = data.find(d => d.Id == currentId);
  console.log(elementClicked);
}

输出：单击按钮后输出

从使用JavaScript创建的按钮获取ID

问题描述投票：0回答：2

2个回答

最新问题

从使用JavaScript创建的按钮获取ID

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2