Question

我一直在尝试为一个有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);

Answer 1

问题是blackBoxes是一组DOM元素，因此您必须遍历该集合并在每个DOM元素上单独使用addEventListener：

Array.from(blackBoxes).forEach(function(blackBox) {
    blackBox.addEventListener('click', boxChange);
});

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

Array.from()是必需的，因为即使blackBoxes是＆＃34;设置＆＃34; 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);
}

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

Answer 2

与向click listener添加every box相反，您还可以在wrapper元素中添加一个：{/ p>

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

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

然后，您可以使用您的功能确定要添加和/或删除的颜色。

继续收到错误，指出某些内容不是函数但无法找到原因

2 个答案: