Получение идентификатора от кнопки, созданной с помощью JavaScript - PullRequest
Новая
       29

Получение идентификатора от кнопки, созданной с помощью JavaScript

0 голосов
/ 20 апреля 2019

Итак, я создаю несколько кнопок динамически с помощью 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 += " ";
    }
}

eigenschaften = 39

eigenschaftsarray = только некоторые имена

Теперь я хочу получить идентификатор кнопки, которую я нажимаю. Я не смог ничего получить из этого JavaScript - onClick, чтобы получить идентификатор нажатой кнопки , запущенной из-за моего метода, использующего js для создания этих кнопок. Добавление события onClick в мой код просто мгновенно предупреждает 39 «неизвестно».

Может кто-нибудь помочь мне, я просто использую Javascript, но не jQuery:)

Спасибо!

Ответы [ 2 ]

1 голос
/ 20 апреля 2019

Когда вы создаете элементы динамически, вы должны помнить, что вы можете связывать события с ними только после того, как они будут доступны в DOM.

Вот рабочая демонстрация: jsfiddle demo

В демоверсии мы привязываем прослушиватель событий («щелчок») к родительскому элементу, который содержит кнопки. Родителем является статический элемент, уже доступный в 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();
0 голосов
/ 20 апреля 2019

Шаг 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);
}

Вывод: Out после нажатия кнопки

enter image description here

...