Question

未捕获的类型错误：无法读取未定义的属性“style”？

2021-03-06

899

javascript

所以我想在网站上制作某种游戏，它会为你选择一个随机部分。我对 javascript 了解不多，所以我不知道那是什么意思。我从这里获取了一些代码并对其进行了修改，但发生了这种情况。它应该选择一个随机部分并将其突出显示为黄色。

// get all the elements from the body
var elems = document.body.getElementsByTagName("panel");

// specify a random index
var index = Math.floor(Math.random() * (0 - elems.length + 1)) + elems.length;

// get the random element
var randomElement = elems[index];

// do whatever
randomElement.style.backgroundColor = 'yellow';

Answer 1

问题在于获取随机索引。您尝试生成一个从 0 到 elems.length 的随机数，但此代码 Math.floor(Math.random() * (0 - elems.length + 1)) + elems.length; 会将 elems.length 添加到随机生成的数字中，因此您的 index 会超过 elems 元素数组的长度。您需要生成一个最大值为 elems.length-1 的索引。如果您将控制台设置为 index ，则会看到问题。

假设 html 元素为

<div class="panel">

尝试以下操作：

// get all the elements from the body
var elems = document.getElementsByClassName("panel");

// specify a random index
var index = Math.floor(Math.random() * elems.length);

另请检查此处的 Math.random() 文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

Answer 2

问题

❌这获取了 <panel> 标签。

var elems = document.body.getElementsByTagName("panel");

✅更改为此。它获取 <anyElement class="panel"> 类似 <div class="panel">

var elems = document.querySelectorAll(".panel");

Answer 3

在设置样式之前，检查元素是否存在。

 If(randomElement) {
     randomElement.style.backgroundColor = 'yellow';
    }