动态创建的元素上的 getElementById

Question

我有一个动态元素，它会id在点击时改变它。单击后，它还会运行一个函数，该函数getElementById用于选择自身，因为id它选择的是单击时分配给元素的那个。当我尝试将这个元素分配给一个变量时，它被分配了null。我在某处读到动态创建的元素可能会发生这种情况，但找不到解决方案。这是相关代码：function renderPlayerHand() {    player.hand.forEach(function (element, index) {        var card = document.createElement("span");        card.classList.add("face_up_card");        switch(element[1]) {            case 'Spade':                card.classList.add("spade")                break;            case 'Diamonds':                card.classList.add("diamonds")                break;            case 'Clubs':                card.classList.add("clubs")                break;            case 'Hearts':                                    card.classList.add("hearts")                break;        }        card.id = `p${index + 1}c`;        card.innerHTML = element[0] + "<br />" + element[1];        card.setAttribute("onclick","startTurn();this.id='a1c'");        document.body.appendChild(card);    });}function startTurn() {    console.log("Turn Started");    var firstCard = document.getElementById('a1c');    console.log(firstCard);}

Answer 1

我认为您'a1c'在致电后声明了 id startTurn()。在下文中，id 在函数内部声明。

function renderPlayerHand() {

  player.hand.forEach(function(element, index) {

    var card = document.createElement("span");

    card.classList.add("face_up_card");

    switch (element[1]) {

      case 'Spade':

        card.classList.add("spade")

        break;

      case 'Diamonds':

        card.classList.add("diamonds")

        break;

      case 'Clubs':

        card.classList.add("clubs")

        break;

      case 'Hearts':

        card.classList.add("hearts")

        break;

    }

    card.id = `p${index + 1}c`;

    card.innerHTML = element[0] + "<br />" + element[1];

    card.setAttribute("onclick", "startTurn(this)");

    document.body.appendChild(card);

  });

}

function startTurn(el) {

  el.id = 'a1c';

  console.log("Turn Started");

  var firstCard = el;

  console.log(firstCard);

}