Javascript addEventListener只运行一次

我一直在尝试建立一个非常简单的网站，当用户点击UI中显示的建筑时，它会弹出一张信息卡，当用户点击角落里的compass img时，它会将信息卡扔掉。该代码应用两个不同的CSS类来获得卡片的显示和消失。我能够使addEventListener在建筑物和指南针上都工作，但它只工作一次。换句话说，在点击建筑一次后，卡片出现，然后在点击指南针后消失。但是，在前两次点击之后，任何进一步的点击似乎都没有注册。至少，这张卡片不再出现和消失了

这似乎很简单，但我一直无法理解为什么按钮只能工作一次

我一直在SublimateText中写作，并在浏览器中查看该网站。如果你对为什么会发生这种事有任何想法，请告诉我

//将标记存储为变量
var wsc=document.getElementById（“wsc”）；
//存储事件函数
var onBuildingClick=function（）{
document.getElementById（“wsc”）.classList.add（“卡片”）；
}
//将事件侦听器添加到标记
wsc.addEventListener（“单击”，onBuildingClick）；
//////////////////////////////////
//将指南针存储为变量
var compass=document.getElementById（“compass_img”）；
//存储事件函数
var onCompassClick=function（）{
document.getElementById（“\uWSC”）.classList.add（“\uCard”）；
}
//将事件侦听器添加到compass
compass.addEventListener（“单击”，打开CompassClick）
.card{
位置：绝对位置；
背景色：白色；
宽度：60%；
身高：60%；
左：20%；
最高：20%；
}
信用卡{
显示：无；
}

比尤里希地图
您没有清除使其不可见的卡样式。你的代码运行良好

var onBuildingClick = function() {
  document.getElementById("_wsc").classList.add("card");    
  document.getElementById("_wsc").classList.remove("_card");
}

这里也是

var onCompassClick = function() {
  document.getElementById("_wsc").classList.add("_card");
  document.getElementById("_wsc").classList.remove("card");
}

记住一个元素可以有多个类

单击建筑，调用
.addClass（'card'）
，现在
#wsc
拥有类
卡

你点击指南针，就会调用
.addClass（“卡”）
，这样
#uWSC
就有了类
卡

再次单击该建筑，调用
.addClass（'card'）
，但它已经有了类
卡，所以什么也没有发生

听起来您希望
.addClass（“U卡”）
将类
卡
替换为
\U卡
，但实际情况并非如此

这个怎么样：

.card {
    display: none;
}
.visible {
    display: block;
}

var onBuildingClick = function () {
    document.getElementById("_wsc").classList.add("visible");
}

var onCompassClick = function () {
    document.getElementById("_wsc").classList.remove("visible");
}

当第一次执行
onCompassClick
时，会添加
display:none
，连续单击不会将其删除。卸下类别
\u卡
，以显示
信息卡再一次

var onBuildingClick = function() {
  document.getElementById("_wsc").classList.remove("_card");
  document.getElementById("_wsc").classList.add("card");
}

检查控制台是否有错误。我没有看到任何元素的
id
为“\u wsc”打开开发者控制台（
ctrl+shift+I
，在大多数浏览器上），是否有任何错误？控制台中没有显示任何错误。我添加了console.log（“eventheard！”）；调用回调函数，并将其注销到控制台。因此，事件侦听器正在工作，但是CSS出现了一些问题。清除卡片样式是什么意思？嘿，本，非常感谢你的帮助！我得到了它。我只是不能让它保持在上一个事件中添加的类！