如何解决无法读取未定义的属性“样式”-Javascript .addEventListener
我正在尝试制作游戏,每次按下按钮时,我想更改列表内div的backgroundColor。
这是我的错误消息
Uncaught TypeError: Cannot read property 'style' of undefined
这是我的JavaScript
var difficulty;
var btnChosen = document.querySelectorAll("button")
var squares = document.querySelectorAll(".square")
var colors = []
for (var i = 0; i < btnChosen.length; i++) {
btnChosen[i].addEventListener("click",function() {
if (this.textContent === "Normal") {
difficulty = 6
for (var i = 0; i < difficulty; i++) {
colors[i] = "rbg("+pickRandom(255)+","+pickRandom(255)+","+pickRandom(255)+")"
squares[i].style.backgroundColor = colors[i]
console.log(colors[i])
console.log(squares[i])
}
console.log(difficulty)
console.log(colors)
}
})
}
这是我的HTML
<div>
<span id="message"></span>
<button>Normal</button>
</div>
<div id="container">
<div id="normal-mode" class="square"></div>
<div id="normal-mode" class="square"></div>
<div id="normal-mode" class="square"></div>
<div id="normal-mode" class="square"></div>
<div id="normal-mode" class="square"></div>
<div id="normal-mode" class="square"></div>
</div>
解决方法
将document.querySelectorAll
更改为document.querySelector
。您不必使用document.querySelectorAll
,因为它只是一个按钮。最好给按钮元素一个id。因此<button id="id-here">Some text</button>
并使用document.querySelector("#id-here")
对其进行引用。将remove btnChosen[i]
更改为btnChosen
,因为该变量仅包含一个元素,但不多。
摆脱for (var i = 0; i < btnChosen.length; i++)
。不需要。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。