使用JavaScript将ID从一个html元素传递到另一个html元素

我的问题很简单。我试图通过只使用普通JavaScript单击其中一个来切换2个元素id

它在第一次单击时就可以为新id使用正确的CSS，但之后，它似乎无法识别新id的单击事件。下面是一个简短的代码示例来说明这一点：

document.addEventListener（“DOMContentLoaded”，function（））{
var blueSpin=document.getElementById（“蓝色微调器”）；
var orangeSpin=document.getElementById（“橙色微调器”）；
blueSpin.addEventListener（“单击”，函数（）{
document.getElementById（“h1”）.innerHTML=“您已单击蓝色”；
setAttribute（“id”、“橙色微调器”）；
setAttribute（“id”，“蓝色微调器”）
});
orangeSpin.addEventListener（“单击”，函数（）{
document.getElementById（“h1”）.innerHTML=“您已单击橙色”；
setAttribute（“id”、“蓝色微调器”）；
setAttribute（“id”、“橙色微调器”）；
});
});
h1，h2{
字体大小：粗体；
文本对齐：居中；
字体大小：45px；
字体系列：“VT323”，单空格；
利润率：15px；
}
#蓝色纺纱机{
颜色：蓝色；
}
#橙色纺纱机{
颜色：黄花；
}

单击以下内容：
由于更改了元素的id，因此必须在更改后更新代码


document.addEventListener（“DOMContentLoaded”，function（））{
var blueSpin=document.getElementById（“蓝色微调器”）；
var orangeSpin=document.getElementById（“橙色微调器”）；
var blueSpinClick=函数（）{
document.getElementById（“h1”）.innerHTML=“您已单击蓝色”；
blueSpin.removeEventListener（'click'，bluepinclick）；
orangeSpin.removeEventListener（'click'，OrangeSinclick'）；
blueSpin.removeEventListener（'click'，bluepinclick）；
setAttribute（“id”、“橙色微调器”）；
setAttribute（“id”、“蓝色微调器”）；
blueSpin=document.getElementById（“蓝色微调器”）；
orangeSpin=document.getElementById（“橙色微调器”）；
blueSpin.addEventListener（“单击”，bluepinclick）；
orangeSpin.addEventListener（“单击”，OrangeSInclick）；
}
document.getElementById（“蓝色微调器”）.addEventListener（“单击”，蓝色微调）；
var orangeSpinClick=函数（）{
document.getElementById（“h1”）.innerHTML=“您已单击橙色”；
orangeSpin.removeEventListener（'click'，OrangeSinclick'）；
blueSpin.removeEventListener（'click'，bluepinclick）；
setAttribute（“id”、“橙色微调器”）；
setAttribute（“id”、“蓝色微调器”）；
blueSpin=document.getElementById（“蓝色微调器”）；
orangeSpin=document.getElementById（“橙色微调器”）；
blueSpin.addEventListener（“单击”，bluepinclick）；
orangeSpin.addEventListener（“单击”，OrangeSInclick）；
}
document.getElementById（“橙色微调器”）.addEventListener（“单击”，橙色微调器）；
});
h1，h2{
字体大小：粗体；
文本对齐：居中；
字体大小：45px；
字体系列：“VT323”，单空格；
利润率：15px；
}
#蓝色纺纱机{
颜色：蓝色；
}
#橙色纺纱机{
颜色：黄花；
}

单击以下内容：
我会在css中使用类选择器，而不是id。大致如下：

var btns = document.getElementsByClassName("btn");
for(var i = 0; i < btns.length; i++){
    btns[i].addEventListener("click", function(e) {
        var clss = e.target.getAttribute("class")
        if(clss === undefined || cls === null){clss = "";}
        if(cls.indexOf("blue-spinner") > -1){
            var output = "You clicked a blue spinner";
            e.target.setAttribute("class", "orange-spinner");
        }else{
            e.target.setAttribute("class", "blue-spinner");
            var output = "You clicked an orange spinner";
        }
        var h = document.getElementById("h1");
        h.innerHTML = output;
    });
}

var btns=document.getElementsByClassName（“btn”）；
对于（变量i=0；i-1）{
var output=“您单击了蓝色微调器”；
e、 setAttribute（“类”、“橙色微调器”）；
}否则{
e、 setAttribute（“类”、“蓝色微调器”）；
var output=“您单击了橙色微调器”；
}
var h=document.getElementById（“h1”）；
h、 innerHTML=输出；
});
}
您已经切换了ID，但单击事件侦听器仍然引用原始元素。谢谢，这似乎允许正确切换颜色，但为了使标题正确描述单击的颜色，我需要添加什么？我正在考虑。。。我认为您应该有一个函数，可以添加事件侦听器，然后删除它，然后再添加它。这很有趣。我相信你可以用一种不太复杂的方式得到同样的效果。您不应该切换元素的
id
。我考虑过这一点。除了使用元素的id之外，还有其他有效的方法可以使用vanilla js获取元素吗？让我们来看看。