javascript - 代码在 jsfiddle 中有效，但在 chrome 中无效。 - 未捕获的类型错误 : Cannot read property 'style' of undefined

Question

我一直在为一款游戏制作一个简单的游戏菜单(我还没有这样做。)该代码在 jsfiddle 中完美运行但是，当我打开我的本地 html 文档时，javascript 都不起作用(console.log 和其他代码在我出错之前起作用)并且我在 createMenu 函数上收到错误:第 67 行，上面写着 Uncaught TypeError: Cannot read未定义的属性“样式”

这是 createMenu 函数的代码(也在 jsfiddle 上)

   var menu = document.getElementsByClassName("menu");
var menu2 = document.getElementsByClassName("menu2");
var createMenu = function()
{   
menu[0].style.display = "block";    <---- Error
menu[1].style.display = "block";
menu[2].style.display = "block";
menu2[0].style.display = "none" ;
menu2[1].style.display = "none" ;
menu2[2].style.display = "none" ;

};
createMenu();

注意:我尝试使用循环来执行 display block/none 以减少代码，但它似乎根本不起作用，甚至在 jfiddle 中也不行。

var createMenu = function()
{
    var i = 0;
while (i <3 ) {
    i++;

menu[i].style.display = "block";
menu2[i].style.display = "none" ;
    }
};

感谢您的帮助!

Answer 1

这可能是因为你在 head 元素中加载了你的 JS 代码，这意味着 JS 在你的 body 渲染之前执行。您必须等待完整的 DOM 加载或将您的脚本放在正文的末尾:

         <!-- ... -->
         <script src="your-script.js"></script>
     </body>
</html>