JavaScript的addEventListener仅运行一次

Question

JavaScript的addEventListener仅运行一次

3

我一直在尝试构建一个非常简单的站点，在用户点击UI中表示的建筑物时，显示信息卡，并在用户点击角落的指南针img时去除该卡片。该代码应用了两种不同的CSS类来使该卡片出现和消失。我能够让addEventListener在建筑物和指南针上都起作用，但它只能起作用一次。换句话说，在第一次点击建筑物后，该卡片会出现，然后在点击指南针之后消失。但是，在这两个动作之后，任何进一步的点击似乎都没有被注册。至少，该卡片不再出现和消失。

这看起来很简单，但我一直没有找到为什么按钮只能使用一次的原因。

我一直在SublimeText中编写并在浏览器中查看该站点。如果您对此有任何想法，请告诉我发生了什么？！

//stores marker as variable
var wsc = document.getElementById("wsc");
//stores event function
var onBuildingClick = function() {
 document.getElementById("_wsc").classList.add("card");
}
//adds event listener to marker
wsc.addEventListener("click", onBuildingClick);



//////////////////////////////////


//stores compass as a variable
var compass = document.getElementById("compass_img");
//stores event function
var onCompassClick = function() {
 document.getElementById("_wsc").classList.add("_card");
}
//adds event listener to compass
compass.addEventListener("click", onCompassClick);

.card {
 position: absolute;
 background-color: white;
 width: 60%;
 height: 60%;
 left: 20%;
 top: 20%;
}
._card {
 display: none;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="byu_richmap.css">

<title>byu_richmap</title>
</head>

<body>
 <div class="campus_map">
  <img id="campus_img" src="BYUmap_simple.png">
  <div id="wsc" class="identifier"></div>
  <div id="hbll" class="identifier"></div>
  <div id="hfac" class="identifier"></div>
  <div id="moa" class="identifier"></div>
  <div id="asb" class="identifier"></div>
  <div id="jkb" class="identifier"></div>
  <div id="tmcb" class="identifier"></div>
  <div id="jfsb" class="identifier"></div>
  <div id="swkt" class="identifier"></div>
  <div id="esc" class="identifier"></div>
  <div id="kc" class="identifier"></div>
  <div id="marb" class="identifier"></div>
  <div id="cb" class="identifier"></div>
  <div id="ctb" class="identifier"></div>
  <div id="lsb" class="identifier"></div>
  <div id="brwb" class="identifier"></div>
  <div id="snlb" class="identifier"></div>
  <div id="rotc" class="identifier"></div>
  <div id="jrcb" class="identifier"></div>
  <div id="mlbm" class="identifier"></div>
  <div id="mc" class="identifier"></div>
  <div id="hc" class="identifier"></div>
  <div id="tnrb" class="identifier"></div>
  <div id="bnsb" class="identifier"></div>
  <div id="hgb" class="identifier"></div>
  <div id="msrb" class="identifier"></div>
  <div id="brmb" class="identifier"></div>
  <div id="mckb" class="identifier"></div>
  <div id="rb" class="identifier"></div>
  <div id="lves" class="identifier"></div>
  <div id="canc" class="identifier"></div>
  <div id="sab" class="identifier"></div>
  <div id="sfh" class="identifier"></div>

  <div id="_wsc" class="cards"></div>
  <!--<div id="_hbll" class="card"></div>
  <div id="_hfac" class="card"></div>
  <div id="_moa" class="card"></div>
  <div id="_asb" class="card"></div>
  <div id="_jkb" class="card"></div>
  <div id="_tmcb" class="card"></div>
  <div id="_jfsb" class="card"></div>
  <div id="_swkt" class="card"></div>
  <div id="_esc" class="card"></div>
  <div id="_kc" class="card"></div>
  <div id="_marb" class="card"></div>
  <div id="_cb" class="card"></div>
  <div id="_ctb" class="card"></div>
  <div id="_lsb" class="card"></div>
  <div id="_brwb" class="card"></div>
  <div id="_snlb" class="card"></div>
  <div id="_rotc" class="card"></div>
  <div id="_jrcb" class="card"></div>
  <div id="_mlbm" class="card"></div>
  <div id="_mc" class="card"></div>
  <div id="_hc" class="card"></div>
  <div id="_tnrb" class="card"></div>
  <div id="_bnsb" class="card"></div>
  <div id="_hgb" class="card"></div>
  <div id="_msrb" class="card"></div>
  <div id="_brmb" class="card"></div>
  <div id="_mckb" class="card"></div>
  <div id="_rb" class="card"></div>
  <div id="_lves" class="card"></div>
  <div id="_canc" class="card"></div>
  <div id="_sab" class="card"></div>
  <div id="_sfh" class="card"></div>-->
 </div>
 <div class="compass">
  <img id="compass_img" src="byu_richmap_compass.png">
 </div>

<script src="byu_richmap.js"></script> 
</body>

</html>

- Drew

请检查您的控制台以查看错误。我没有看到任何具有“_wsc” ID的元素。 - Jared Smith

打开您的开发者控制台（在大多数浏览器上是 ctrl + shift + i），您是否会收到任何错误信息？ - Robbie Milejczak

控制台没有显示任何错误。我在回调函数中添加了console.log（“eventheard！”）;它可以很好地记录到控制台中。因此，事件侦听器正在工作，但CSS出了问题。关于清除_card风格是什么意思？ - Drew

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gordon Kushner · Answer 1

你没有清除_card样式，这使它不可见。你的代码工作得很好。

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

小提琴

- Ben West · Answer 2

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

当你点击建筑物时，调用.addClass('card')，现在#_wsc有了类card。

当你点击指南针时，调用.addClass('_card')，那么#_wsc就有了类card _card。

当你再次点击建筑物时，它会调用.addClass('card')，但它已经有了类card，所以什么也不会发生。

听起来你期望.addClass('_card')用_card替换类card，但它并没有这样做。

怎么样：

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

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

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

- elvis_ferns · Answer 3

由于第一次执行 onCompassClick 添加了 display:none，导致连续点击时无法移除。请移除类名为 _card，以便再次显示信息卡片。

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