“无法设置未定义的属性‘背景’”？
“无法设置未定义的属性‘背景’”？
提问于 2020-05-01 12:32:02
所以，我正在制作一个小游戏，你可以在一定的时间内点击尽可能多的红色圆圈(时间还没有确定)。但我的想法是，在屏幕上有圆圈，除一个外，所有的黑色/白色，即红色。你的任务是点击红色的圆圈。当你点击它，另一个变红，到目前为止，直到时间。问题是，我甚至可以将其中一个圆圈的背景设置为红色(它被认为是非常出色的)。所以，任何帮助都是可以接受的。提前感谢！
这是HTML文件：
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<button class="square number-0"></button>
<button class="square number-1"></button>
<button class="square number-2"></button>
<button class="square number-3"></button>
(...)
<button class="square number-47"></button>
<button type="button" class="retry">Retry Play</button>
</div>
</body>
<script src="index.js"></script>
</html>这是javascript文件：
const squares = document.querySelector('.square');
const retry = document.querySelector('.retry');
retry.addEventListener('click', function(){
let circle = Math.floor(Math.random()*squares.length);
let number = `number-${circle}`;
number.style.background = 'red';
});回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-01 12:40:21
代码中存在一些问题：
- 方块需要是querySelectorAll才能返回节点元素数组
- 编号需要是一个querySelector才能得到节点，然后应用您想要的
样式背景。
const squares = document.querySelectorAll('.square');
const retry = document.querySelector('.retry');
retry.addEventListener('click', function(){
let circle = Math.floor(Math.random()*squares.length);
let number = `.number-${circle}`;
document.querySelector(number).style.background = 'red';
}); <div class="container">
<button class="square number-0"></button>
<button class="square number-1"></button>
<button class="square number-2"></button>
<button class="square number-3"></button>
(...)
<button class="square number-47"></button>
<button type="button" class="retry">Retry Play</button>
</div>
Stack Overflow用户
发布于 2020-05-01 12:38:19
我想
document.querySelector(`.number-${circle}`).style.background = 'red';应该能起作用。所以
retry.addEventListener('click', function(){
let circle = Math.floor(Math.random()*squares.length);
document.querySelector(`.number-${circle}`)
.style.background = 'red';
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61542572
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号