动态创建的元素上的 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() {&nbsp; player.hand.forEach(function(element, index) {&nbsp; &nbsp; var card = document.createElement("span");&nbsp; &nbsp; card.classList.add("face_up_card");&nbsp; &nbsp; switch (element[1]) {&nbsp; &nbsp; &nbsp; case 'Spade':&nbsp; &nbsp; &nbsp; &nbsp; card.classList.add("spade")&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'Diamonds':&nbsp; &nbsp; &nbsp; &nbsp; card.classList.add("diamonds")&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'Clubs':&nbsp; &nbsp; &nbsp; &nbsp; card.classList.add("clubs")&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'Hearts':&nbsp; &nbsp; &nbsp; &nbsp; card.classList.add("hearts")&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; &nbsp; card.id = `p${index + 1}c`;&nbsp; &nbsp; card.innerHTML = element[0] + "<br />" + element[1];&nbsp; &nbsp; card.setAttribute("onclick", "startTurn(this)");&nbsp; &nbsp; document.body.appendChild(card);&nbsp; });}function startTurn(el) {&nbsp; el.id = 'a1c';&nbsp; console.log("Turn Started");&nbsp; var firstCard = el;&nbsp; console.log(firstCard);}