继续得到一个错误，即某个东西不是函数，但找不到原因

Continue to get an error that something is not a function but cannot find why

本文关键字：函数 找不到 继续 错误 一个      更新时间：2024-04-22

我一直在尝试为一个类创建一些东西，这个类有145个框，每五个框中就有一个是白色的。通过单击一个框，颜色应该变为相反的颜色，悬停在它们上面应该会改变不透明度。我已经能够以正确的方式创建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);
});

工作小提琴：https://jsfiddle.net/od9md4y8/

Array.from()是必需的，因为即使blackBoxes是DOM元素的"集合"，它也不是真正的数组。CCD_ 5将返回由CCD_ 6中的元素组成的真数组。

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

https://jsfiddle.net/od9md4y8/1/

与在every box中添加click listener不同，您还可以在wrapper元素中添加一个：

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('wrapper').addEventListener('click', function (evt) {
        console.log(evt);
    });
});

每个click event都有特定的值，您可以使用这些值来确定单击了哪个框。在这种情况下，evt.target会为您提供已单击的元素。

然后，您可以使用您的函数来确定应该添加和/或删除哪些颜色。

相关文章：