Javascript 动态创建的元素上的getElementById

我有一个动态元素，它在单击时更改其

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);
}

函数renderPlayerHand（）{
player.hand.forEach（函数（元素、索引）{
var card=document.createElement（“span”）；
card.classList.add（“face_-up_-card”）；
开关（元件[1]）{
“黑桃”一案：
卡片.类列表.添加（“黑桃”）
打破
“钻石”案：
卡片。类别列表。添加（“钻石”）
打破
“俱乐部”案例：
卡片。课程列表。添加（“俱乐部”）
打破
“红心”一案：
卡片。类列表。添加（“红心”）
打破
}
card.id=`p${index+1}c`；
card.innerHTML=元素[0]+“
”+元素[1]；
setAttribute（“onclick”，“startTurn（）；this.id='a1c'）；
文件.正文.附件（卡片）；
});
}
函数startTurn（）{
console.log（“开始转动”）；
var firstCard=document.getElementById（'a1c'）；
控制台日志（第一张卡）；
}

我想您在调用

startTurn（）

后会将id声明为

'a1c'

。在下面的代码中，id在函数中声明

函数renderPlayerHand（）{
player.hand.forEach（函数（元素、索引）{
var card=document.createElement（“span”）；
card.classList.add（“face_-up_-card”）；
开关（元件[1]）{
“黑桃”一案：
卡片.类列表.添加（“黑桃”）
打破
“钻石”案：
卡片。类别列表。添加（“钻石”）
打破
“俱乐部”案例：
卡片。课程列表。添加（“俱乐部”）
打破
“红心”一案：
卡片。类列表。添加（“红心”）
打破
}
card.id=`p${index+1}c`；
card.innerHTML=元素[0]+“
”+元素[1]；
setAttribute（“onclick”、“startTurn（this）”）；
文件.正文.附件（卡片）；
});
}
功能启动旋转（el）{
el.id='a1c'；
console.log（“开始转动”）；
var firstCard=el；
控制台日志（第一张卡）；
}

startTurn（）；this.id='a1c'

您意识到，如果您单击多张卡，此代码将生成具有相同

id

的多个元素。更改

id

的原因是什么？首先，它不会对

id

产生任何感觉，这通常不是一个好主意。它们很容易理解，这就是为什么这么多新手使用它们的原因，但管理它们很快就会成为一个问题（正如您所经历的那样）。以及，更改元素的

id

？这不是解决任何问题的好方法。@Hihikokun我打赌你有

addEventListener（'click'，functionme（））

你真正想要的

addEventListener（'click'，functionName）

（no

（）

）我的建议和下面的答案完全一样谢谢，这确实解决了我的问题，尽管从我得到的评论来看，我可能不得不完全放弃这种方法！至少现在我知道要注意秩序了，泰。