Javascript addEventListener 只运行一次-6ren

Javascript addEventListener 只运行一次

转载作者：行者123 更新时间：2023-12-01 17:30:26

28

4

我一直在尝试构建一个非常简单的网站，该网站会在用户点击 UI 中代表的建筑物时弹出信息卡，并在用户点击 Angular 落的罗盘 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>

最佳答案

您没有清除使其不可见的 _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");
}

Fiddle

关于Javascript addEventListener 只运行一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48466887/

28

4

0

文章推荐： ios - 使用 UISearchController 以编程方式定位 UISearchBar

文章推荐： ios - objective-c -检查NSString是否可计算

文章推荐： Java openGL绘制纹理

angular - 从批处理文件运行一组命令(运行 VSCode、运行 NG 服务)
好的，所以我想从批处理文件运行我的整个工作环境... 我想要实现什么...... 打开新的 powershell，打开我的 API 文件夹并从该文件夹运行 VS Code 编辑器(cd c:\xy;
单击“运行”按钮时，iOS Xcode 项目不会构建/运行
我正在查看 Cocoa Controls 上的示例并下载了一些演示。我遇到的问题是一些例子，比如 BCTabBarController ，不会在我的设备上构建或启动。当我打开项目时，它看起来很正常，没
c - 运行 C — helloWorld 运行，但没有其他内容 — Ubuntu
我刚刚开始学习 C 语言(擅长 Java 和 Python)。当编写 C 程序(例如 hello world)时，我在 ubuntu cmd 行上使用 gcc hello.c -o hello 编译
php - 从 cron 运行 php 没有作为 CLI 运行
我在 php 脚本从 cron 开始运行到超时后注意到了这个问题，但是当它从命令行手动运行时这不是问题。 (对于 CLI，PHP 默认的 max_execution_time 是 0) 所以我尝试运行
node.js - 如何通过 IntelliJ 运行/调试配置让 wdio 运行？
我可以使用命令行运行测试 > ./node_modules/.bin/wdio wdio.conf.js 但是如果我尝试从 IntelliJ 的运行/调试配置运行它，我会遇到各种不同的错误。 Fea
java - 从 python 运行 bat 文件会返回错误，而直接从 cmd 运行
Error occurred during initialization of VM. Could not reserve enough space for object heap. Error: C
python - 无法从 anaconda 运行 jupyter 笔记本，但可以从 python 运行
将 Anaconda 安装到 C:\ 后，我无法打开 jupyter 笔记本。无论是在带有 jupyter notebook 的 Anaconda Prompt 中还是在导航器中。我就是无法让它工作。
Python 脚本通过双击和 IDLE 运行，但不通过 Windows CMD shell 运行
我遇到一个问题，如果我双击我的脚本 (.py)，或者使用 IDLE 打开它，它将正确编译并运行。但是，如果我尝试在 Windows 命令行中运行脚本，请使用 C:\> "C:\Software_Dev
php - 查询从 postman 和 phpmyadmin 运行，但不是从 android 运行
情况我正在使用 mysql 数据库。查询从 phpmyadmin 和 postman 运行但是当我从 android 发送请求时(它返回零行) 我已经记录了从 android 发送的电子邮件是正确
java - 从 Java 运行 .exe 会提供与直接从 Windows 运行 .exe 不同的控制台输出
所以这个有点奇怪 - 为什么从 Java 运行 .exe 文件会给出不同的输出而不是直接运行 .exe。当 java 在下面的行执行时，它会调用我构建的可与 3CX 电话系统配合使用的 .exe 文
c# - 应用程序在 Visual Studio 的单元测试中以 x86 运行，但在独立时以 x64 运行
这行代码 Environment.Is64BitProcess 当我的应用单独运行时评估为真。但是当它在我的 Visual Studio 单元测试中运行时，相同的表达式的计算结果为 false。我
javascript - 使用 JQuery 运行 AJAX 和使用普通 XMLHttpRequest 运行 AJAX 有什么区别？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
c - 为什么我的 C 程序可以在 "git bash"运行，但不能在 "cmd"运行？
我写了一个使用 libpq 连接到 PostgreSQL 数据库的演示。我尝试通过包含将 C 文件连接到 PostgreSQL #include 在我将路径添加到系统变量 I:\Program F
java - 从 Jenkins 运行 Android 模拟器以使用 Robotium 运行 Junit 测试
如何从 Jenkins 运行 Android 模拟器来运行我的测试？当我在 Execiute Windows bath 命令中写入时，运行模拟器的命令: emulator -avd Tester 然后
ruby-on-rails - 使用 ngninx 运行 errbit，使用 ssl 运行 passenger
我已经配置好东西，这样我就可以使用 ssl 登录和访问在 nginx 上运行的 errbit 我的问题是我不知道如何设置我的 Rails 应用程序的 errbit.rb 以便我可以运行测试 nginx
ios - flutter app 不是由 flutter build ios 运行，而是由 xcode 运行
我编写了 flutter 应用程序，我通过 xcode 打开了 ios 部分并且应用程序正在运行，但是当我通过 flutter build ios 通过 vscode 运行应用程序时，我得到了这个错误
python - 我的 python 脚本通过我的 IDE (PyCharm) 运行，但无法使用 Python shell 运行
我有一个简短的 python 脚本，它使用日志记录模块和 configparser 模块。我在Win7下使用PyCharm 2.7.1和Python 3.3。当我使用 PyCharm 运行我的脚本时
c# - .NET 2005 - 通过 IIS 的测试作为 x86 运行。单元测试以 x64 运行
我在这里遇到了一些难题。我的开发箱是 64 位的，windows 7。我所有的项目都编译为“任何 CPU”。该项目引用了 64 位版本的第 3 方软件当我运行不使用任何 Web 引用的单元测试时，
c++ 相同的代码从不在 Visual Studio 中编译/运行，有时在 Qt Creator 中编译/运行
当我注意到以下问题时，我正在做一些 C++ 练习。给定的代码将不会在 Visual Studio 2013 或 Qt Creator 5.4.1 中运行/编译报错: invalid types 'd
airflow - 运行 dag 并让 Airflow 运行 : error: the following arguments are required: task_id,execution_date
假设我有一个 easteregg.py 文件: from airflow import DAG from dateutil import parser from datetime import tim

首页

博学

6Ren·AI

商城

Javascript addEventListener 只运行一次