我正在尝试使用 JS 构建一个颜色猜谜游戏。我使用了带有初始颜色列表的颜色数组。到目前为止，整个代码一直有效，直到我尝试在使用当前颜色单击每个方 block 时显示警报。
在控制台中我得到如下错误:
Uncaught TypeError: Cannot read property 'style' of undefined at HTMLDivElement. (color_game.js:25)
第 25 行指向此:
var clickedColor = squares[i].style.background;
在这里，我试图获取对数组中每个方 block 样式的引用。 (看下面的src)
它说 sth 在进一步检查时未定义。
我的完整代码附在下面: HTML:
<body>
<h1>The Great <span id="colorDisp">RGB</span> Guessing Game</h1>
<div id="container">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
<script src="color_game.js" type="text/javascript"></script>
</body>
JavaScript 代码:
var colorArr = [
"rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(0, 255, 0)",
"rgb(0, 255, 255)",
"rgb(0, 0, 255)",
"rgb(255, 0, 255)"
];
var squares = document.querySelectorAll(".square");
var pickedColor = colorArr[3];
var colorDisp = document.getElementById("colorDisp");
colorDisp.innerHTML = pickedColor;
for (var i = 0; i < squares.length; i++) {
squares[i].style.background = colorArr[i];
squares[i].addEventListener("click", function() {
var clickedColor = squares[i].style.background;
alert(clickedColor);
if (clickedColor === pickedColor) {
alert("CORRECT");
} else {
alert("WRONG COLOR!!!");
}
});
}
我试过这两行，但是我的代码没有执行:
var clickedColor = squares[i].style.background;
和
var clickedColor = this.style.background;
谁能告诉我如何在 JS 中访问数组的样式元素？
最佳答案
我做了 2 个小改动，它对我有用。
修改了 HTML 部分，为 <div> 添加了一些文本.例如
<div id="container">
<div class="square">
A
</div>
<div class="square">
B
</div>
<div class="square">
C
</div>
<div class="square">
D
</div>
<div class="square">
E
</div>
<div class="square">
F
</div>
</div>
然后修改行
var clickedColor = squares[i].style.background;
到
var clickedColor = this.style.background;
它现在对我来说工作正常。
关于javascript - 访问 JavaScript 错误的单个样式元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45469969/