Javascript 分区'；未使用GetElementsByCassName（）移动

我已经开始用HTML、CSS和JavaScript创建一个游戏。我创建了一个函数，每当我点击一个按钮，所有的红色DIV都应该开始移动。但是，我在控制台中不断遇到此错误：

未捕获的TypeError:无法读取未定义的属性“style”。在index.html:48

由于此错误，DIV不移动。到目前为止，我已使用此代码：

函数startName（）{
var gameObj=document.getElementsByClassName（“对象”）；
对于（变量i=0；i

标题{
位置：绝对位置；
宽度：100%；
身高：10%；
背景颜色：蓝色；
排名：0；
左：0；
}
.反对{
宽度：100px；
高度：100px；
边界半径：50%；
位置：绝对位置；
背景色：红色；
过渡：1s；
最高：40%；
左：30%；
}
布顿先生{
光标：指针；
颜色：白色；
背景色：黑色；
边界：无；
身高：50%；
宽度：5%；
}

开始
停止

Move

setInterval（）

在

startGame（）的根级别


函数startName（）{
var h=setInterval（函数（）{
var gameObj=document.getElementsByClassName（“对象”）；
对于（变量i=0；i

标题{
位置：绝对位置；
宽度：100%；
身高：10%；
背景颜色：蓝色；
排名：0；
左：0；
}
.反对{
宽度：100px；
高度：100px；
边界半径：50%；
位置：绝对位置；
背景色：红色；
过渡：1s；
最高：40%；
左：30%；
}
布顿先生{
光标：指针；
颜色：白色；
背景色：黑色；
边界：无；
身高：50%；
宽度：5%；
}

开始
停止
发生这种情况是因为您在for循环中使用了setInterval

这里发生了两件事-

setInterval
本质上是异步的，在执行过程中取
i
的结束值，即
2
var
作为函数作用域变量，不会将值保留在循环的块作用域内
要解决这个问题，可以将setInterval包装在函数中，并将
i
的值作为参数传递。像这样-



标题{
位置：绝对位置；
宽度：100%；
身高：10%；
背景颜色：蓝色；
排名：0；
左：0；
}
.反对{
宽度：100px；
高度：100px；
边界半径：50%；
位置：绝对位置；
背景色：红色；
过渡：1s；
最高：40%；
左：30%；
}
布顿先生{
光标：指针；
颜色：白色；
背景色：黑色；
边界：无；
身高：50%；
宽度：5%；
}
开始
停止
函数moveElem（gameObj，i）{
var h=setInterval（函数（）{
gameObj[i].style.transition=“1s”；
gameObj[i].style.left=Math.floor（Math.random（）*90）+“%”；
gameObj[i].style.top=Math.floor（Math.random（）*90）+“%”；
}, 500);
document.getElementById（“停止”）.addEventListener（“单击”，函数）（）{
净距（h）；
});
}
函数startName（）{
var gameObj=document.getElementsByClassName（“对象”）；
对于（变量i=0；i
谢谢您的回答！它解决了我的问题！但是，您能告诉我为什么之前它不工作吗？这是因为在setInterval函数中，变量
i
将不会根据变量函数作用域工作。好的。我只是JavaScript的初学者，所以我没有意识到这一点。谢谢你！是的，这就是重点。但是似乎
i
将是
2
而不是
3
。因为
i++
会让
i
变成
0、1、2、EOL
（循环结束），但是
setInterval
是异步的，所以整个代码会变成
gameObj[2]
这是未定义的。@CasimirCrystal我的坏你是对的，我想我看到了三个div，我会编辑我的答案，闭包也是一个解决方案。只需将OP的代码更改为
for（让i=0）.
仍然可以解决问题。在这种情况下，通过
gameObj[0]
和
gameObj[1]
到
setInterval
不会有问题@Shymak SethEven尽管现在的浏览器支持ES2015及以上版本，
let
仍然会导致旧浏览器的兼容性问题