0

获取类型错误：document.getElementById("free_shipping")是null

这就是我正在尝试的——

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

我可以让这个代码更好，因为我只需要JAVACRIPT在这种情况下使用。

JS代码

<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>

代码

    <!--####### 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;

}
4

3 回答 3

1

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

于 2012-08-10T11:13:39.497 回答
1

如果您<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来完成，但我对它的了解非常有限。

于 2012-08-10T11:13:51.953 回答
1

我认为在您的情况下，脚本执行早于创建实际 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

于 2012-08-10T11:14:58.837 回答