Question

获取TypeError：document.getElementById("free_shipping")为null

这就是我的尝试---

我只是想确保这两个特定的div只显示我的主页。但我得到这个错误，但警报工作。如果我错过了什么，请告诉我。

我能否更好地使用此代码，因为在这种情况下我只需使用JAVACRIPT。

JS CODE

<script type="text/javascript">
var myaddr = location.host;
if(myaddr  == "abc.xy.com")
{
document.getElementById('free_shipping').style.display="visible"; 
document.getElementById('sale').style.display="visible"; 
//alert("I am in if");
}
else{
document.getElementById('free_shipping').style.display="none"; 
document.getElementById('sale').style.display="none"; 
//alert("I am in else");
}
</script>

HTML CODE

    <!--####### Free Shipping Start ##############-->
    <div id="free_shipping">
    </div>
    <!--Free Shipping End-->
    <!--####### Sale Start ####### -->
    <div id="sale">
    </div>
    <!--Sale End-->

CSS代码

    #free_shipping
    {
    background: url("../images/template/swap_free_shipping.jpg") no-repeat scroll 0 0 transparent;
    height: 112px;
    left: -57px;
    position: relative;
    top: 256px;
    width: 62px;  
    }
    #sale
    {
    background: url("../images/template/swap_sale.jpg") no-repeat scroll 0 0 transparent;
    left: -55px;
    position: relative;
    top: 384px;
    width: 59px;
    height: 79px;

}

Answer 1

也许在文档完全加载之前调用JS，因此该元素尚不存在？尝试使用页面底部的JS代码或仅在整页加载后调用它。

Answer 2

如果您的<script>位于网站的<head></head>部分，那么它会在页面加载之前开始执行，因此free_shipping和sale不会存在于DOM中。

尝试执行以下操作，这将使您的代码在页面加载完成后发生...

<script type="text/javascript">
  window.onload = function() {
    var myaddr = location.host;
    if(myaddr  == "abc.xy.com")
    {
      document.getElementById('free_shipping').style.display="visible"; 
      document.getElementById('sale').style.display="visible"; 
      //alert("I am in if");
    }
    else{
      document.getElementById('free_shipping').style.display="none"; 
      document.getElementById('sale').style.display="none"; 
      //alert("I am in else");
    }
 }
</script>

这也可以使用jquery library来完成，但我对它的了解非常有限。

Answer 3

我认为在你的情况下，脚本执行的时间早于实际的elem被创建

<body>
<!--####### Free Shipping Start ##############-->
<div id="free_shipping">
</div>
<!--Free Shipping End-->
<!--####### Sale Start ####### -->
<div id="sale">
</div>
<!--Sale End-->
</body>

<script type="text/javascript">
var myaddr = location.host;
if(myaddr  == "abc.xy.com")
{
document.getElementById('free_shipping').style.display="visible"; 
document.getElementById('sale').style.display="visible"; 
//alert("I am in if");
}
else{
document.getElementById('free_shipping').style.display="none"; 
document.getElementById('sale').style.display="none"; 
//alert("I am in else");
}
</script>

应该解决您的问题，同时检查一下 - javascript:how to write $(document).ready like event without jquery

JS代码有什么问题，让我知道代码是否可以改进

3 个答案: