Javascript"；无法读取null"；的样式属性；。什么都没用_Javascript

Javascript"；无法读取null"；的样式属性；。什么都没用

javascript

Javascript"；无法读取null"；的样式属性；。什么都没用,javascript,Javascript,我在这个问题上尝试过许多其他的解决办法，但都不管用。我从我发现的其他问题中检查了我的代码，它看起来非常好。我希望javascript将名为“snake”的div移动到它移动的方向。但它一直说蛇是“空的”。代码： Html: 蛇 #主要{ 高度：100px；宽度：100px；边框：1px纯黑； } #蛇{ 位置：绝对位置；顶部：20px；左：20px；宽度：10px；高度：10px；背景：黑色； } Javascript: 让movePos=null；让isMoving=fa

我在这个问题上尝试过许多其他的解决办法，但都不管用。我从我发现的其他问题中检查了我的代码，它看起来非常好。我希望javascript将名为“snake”的div移动到它移动的方向。但它一直说蛇是“空的”。代码：

Html:


蛇
#主要{
高度：100px；
宽度：100px；
边框：1px纯黑；
}
#蛇{
位置：绝对位置；
顶部：20px；
左：20px；
宽度：10px；
高度：10px；
背景：黑色；
}

Javascript:

让movePos=null；
让isMoving=false；
让snake=document.getElementById（“snake”）；
函数main（）{
文档.添加的事件列表器（“按键”，功能（事件）{
如果（event.key==“w”）{
movePos=“向上”；
}else if（event.key==“s”）{
movePos=“向下”；
}else if（event.key==“a”）{
movePos=“左”；
}else if（event.key==“d”）{
movePos=“右”；
}
如果（！isMoving）{
askToMove（）；
}
});
}
函数askToMove（）{
if（movePos！=null）{
isMoving=真；
设置间隔（移动，1000）；
}
}
函数move（）{
如果（移动位置=“向上”）{
snake.style.top=100；
}
}
main（）；

您在定义“snake”元素之前运行了javascript。只需将您当前的HTML代码替换为此代码

<!DOCTYPE html>
<html lang="en">
    <body> <!-- Body shifted up -->
        <div id="main">
            <div id="snake"></div>
        </div>
    </body>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Snake</title>
        <style>
            #main {
                height: 100px;
                width: 100px;
                border: 1px solid black;
            }
            #snake {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 10px;
                height: 10px;
                background: black;
            }
        </style>
        <script src="script.js"></script>
    </head>
    <!-- No Body Here -->
</html>


蛇
#主要{
高度：100px；
宽度：100px；
边框：1px纯黑；
}
#蛇{
位置：绝对位置；
顶部：20px；
左：20px；
宽度：10px；
高度：10px；
背景：黑色；
}

我所做的就是把身体部分向上移动。我以前也遇到过同样的问题，我用这个解决了。

它成功了。非常感谢

body

不能出现在

head

之前，这会导致HTML无效。相反，可以将脚本标记移到

之前，或者将其留在原处，并将

延迟

属性添加到脚本标记。不要按照Kevin George在回答中的建议执行。相反，可以将脚本标记移到

之前，或者将其保留在原来的位置，并将

延迟

属性添加到脚本标记中。

<!DOCTYPE html>
<html lang="en">
    <body> <!-- Body shifted up -->
        <div id="main">
            <div id="snake"></div>
        </div>
    </body>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Snake</title>
        <style>
            #main {
                height: 100px;
                width: 100px;
                border: 1px solid black;
            }
            #snake {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 10px;
                height: 10px;
                background: black;
            }
        </style>
        <script src="script.js"></script>
    </head>
    <!-- No Body Here -->
</html>