个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我一直在尝试为一个有 145 个盒子的类(class)创建一些东西，其中每五个盒子都是白色的。通过单击一个框，颜色应更改为相反的颜色，并将鼠标悬停在它们上方应更改不透明度。我已经能够以正确的方式创建 145 个框，但我不知道如何通过单击更改它们。我无法以任何方式更改给定的 html，因此我必须使用函数和事件监听器来更改它们。我尝试创建一个函数，将单击的任何黑框更改为白框，但它说它不是函数(最后一行出现错误)。我可能只是犯了一个简单的错误，任何人都可以帮助我和/或将我推向正确的方向。
Html(给定):
<html>
<head>
<title>A test</title>
<script>
</script>
</head>
<body style="background-color:#337799; margin:0px; padding:0px;">
<div id="wrapper" style="width:960px; overflow:hidden; margin:auto; background-color:black;">
</div>
</body>
<script src="assignment10.js"></script>
JS:
var blackBg = document.getElementById('wrapper');
for (var i=1; i<145; i++){
var repeatSq = document.createElement('div');
repeatSq.style.float = "left";
repeatSq.style.height = "50px";
repeatSq.style.width = "50px";
repeatSq.style.backgroundColor = "black";
repeatSq.style.opacity = ".5";
repeatSq.style.border = "solid black 5px";
repeatSq.className = "black";
if(i%5 === 0){
repeatSq.style.backgroundColor= "white";
repeatSq.style.border= "solid white 5px";
repeatSq.className = "white";
}
blackBg.appendChild(repeatSq);
}
var blackBoxes = document.getElementsByClassName('black');
var boxChange = function(evt){
evt.target.style.backgroundColor="white";
evt.target.style.border = "solid white 5px";
}
blackBoxes.addEventListener('click', boxChange);
最佳答案
问题在于 blackBoxes 是一组 DOM 元素，因此您必须迭代该集合并在每个 DOM 元素上单独使用 addEventListener:
Array.from(blackBoxes).forEach(function(blackBox) {
blackBox.addEventListener('click', boxChange);
});
工作 fiddle :https://jsfiddle.net/od9md4y8/
Array.from() 是必需的，因为尽管 blackBoxes 是 DOM 元素的“集合”，但它不是真正的数组。 Array.from() 将返回由 blackBoxes 中的元素组成的真正数组。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
但是，有一个更好的方法可以做到这一点:在创建元素时将事件监听器添加到元素中!
if(i%5 === 0){
repeatSq.style.backgroundColor = "white";
repeatSq.style.border = "solid white 5px";
repeatSq.className = "white";
}
else {
repeatSq.addEventListener('click', boxChange);
}
关于javascript - 继续报错说某物不是函数但找不到原因，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36521107/
25
4
0
我对cassandra并使用1.2.10非常陌生。我有一个时间戳数据类型的主键列。现在，我正在尝试检索日期范围的数据。由于我们知道不能在cassandra中使用，因此我使用的是大于()来获取日期范围。
我正在尝试进行有条件的转场。但我得到: Terminating app due to uncaught exception 'NSInvalidArgumentException', reas
我有一个游戏项目，在调试和发布模式下在设备上运行得非常好。我有两个版本。旧版本和新版本具有更多(后来我添加了)功能，并且两者的 bundle ID、版本相同。当我构建旧版本时，之前没有安装“myGam
这个问题已经有答案了: 奥 git _a (2 个回答) 已关闭 5 年前。 我正在获取 ClassCastException 。这两个类来自不同的 jar，但是JettyContinuationPr
以下代码行抛出异常: HttpResponse response = client.execute(request); // actual HTTP request 我能够捕获它并打印: Log
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
public class TwoThreads { private static Object resource = new Object(); private static void
当我输入 6 (int) 作为值时，运行此命令会出现段错误 (gcc filename.c -lm)。请帮助我解决这个问题。预期的功能尚未实现，但我需要知道为什么我已经陷入段错误。 谢谢! #incl
所以，过去一周半我一直在研究这个 .OBJ/.MTL 网格解析器。在这段时间里，我一直在追踪/修复很多错误、清理代码、记录代码等等。 问题是，每修复一个错误，仍然会出现这个问题，而且一张图片胜过一千个
我正在运行一个代码，它基本上围绕 3 个维度旋转一个大数据数组(5000 万行)。但是，我遇到了一个奇怪的问题，我已将其缩小到如何评估旋转矩阵。基本上，对于除绕 x 轴以外的任何旋转，python 代
就在你说这是重复之前，我已经看到了其他问题，但我仍然想发布这个。 所以我正在阅读 Thinking in Java -Bruce Eckel 这篇文章是关于小写命名约定的: In Java 1.0 a
我想在我的应用程序中使用 REST API。它为我从这个应用程序发出的所有请求抛出 SocketTimeoutException。 Logcat 输出:(您也可以在此处看到带有漂亮格式的输出:http
我知道 raise ... from None 并已阅读 How can I more easily suppress previous exceptions when I raise my own
在未能找到各种Unix工具(例如xargs和whatnot)的最新独立二进制文件(this version很好，但需要外部DLL)后，我承担了自己进行编译的挑战。 ...这是痛苦的。 最终，尽管如此，
我有一个用PHP编写的流套接字服务器。 为了查看一次可以处理多少个连接，我用C语言编写了一个模拟器来创建1000个不同的客户端以连接到服务器。 stream_socket_accept几次返回fals
我的Android Studio昨天运行良好，但是今天当我启动Android Studio并想在移动设备上运行应用程序时，发生了以下错误， 我在互联网和stackoverflow上进行了搜索，但没有解
默认情况下，grails似乎为Java域对象的toString()返回:。那当然不是我想要的，所以我尝试@Override toString()返回我想要的。当我尝试grails generate-a
尝试通过LDAP通过LDAP对用户进行身份验证时，出现以下错误。 Reason: Cannot pass null or empty values to constructor. 谁能告诉我做错了什么
我正在尝试使用应用程序附带的 Houdini Python 模块，该模块是 Houdini 安装文件夹的一部分，位于标准 Python 路径之外。按照安装说明操作后，运行 Houdini Termin
简单地说，我正在为基本数据库编写单链表的原始实现。当用户请求打印索引下列出的元素高于数据库中当前记录数量时，我不断出现段错误，但仅当差值为 1 时。对于更高的数字，它只会触发我在那里编写的错误系统。
我是一名优秀的程序员,十分优秀！