Javascript检查数字是否=变量

Question

var Period =1;

        if(Period==1){
            document.getElementById("Main").style.backgroundImage = "url('Main_Background_Grass_1.png')";
        }

由于某种原因，这将无法正常工作。 图像位置正确，但是我肯定有问题。

我对javascript很新

这是更多代码

<script type="text/javascript">

        var Knowledge = 0;
        var Period =1;

        if(Period==1){
            document.getElementById("Main").style.backgroundImage = "url('Main_Background_Grass_1.png')";
        }

</script>

<div id="Main">

    <div id="Toolbar">
        Oh noes! Something Went Wrong
    </div>
</div>

图像根本不会显示

Answer 1

在调用函数时找不到该元素，请将javascript放在结束body标签之前

<div id="Main">

    <div id="Toolbar">
        Oh noes! Something Went Wrong
    </div>
</div>

<script type="text/javascript">

        var Knowledge = 0;
        var Period =1;

        if(Period==1){
            document.getElementById("Main").style.backgroundImage = "url('Main_Background_Grass_1.png')";
        }

</script>

Answer 2

Uncaught TypeError: Cannot read property 'style' of null
这是因为尚未加载该元素。 有两种方法可以确保代码仅在页面准备好后才运行。 一种是将代码放在正文的底部，因此页面已被加载。 另一种是将其放入窗口加载事件的事件侦听器中：

<script type="text/javascript">
  window.addEventListener("load", function(e) {

  // code goes here

  });
</script>

最佳做法是哪一种？ 那是一场永恒的辩论。 我更喜欢侦听器，以使代码位于顶部，但许多人会不同意。