What is wrong with the JS code and let me know if the code can be improve

Question

Getting TypeError: document.getElementById("free_shipping") is null

This is what im trying ---

I just want to make sure that these two particular div show only only my home page . but im getting this error however alerts are working. Let me know if im missing something.

Can i made this code even better as i only have to use JAVACRIPTin this case.

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 CODE

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

}

score 1 · Answer 1 · answered Aug 10 '12 at 11:13

1

Perhaps the JS is being called before the document has fully loaded and therefore the element doesn't exist yet? Try it with the JS code at the bottom of the page or call it only after full page load.

answered Aug 10 '12 at 11:13

Killian

359
1
8

score 1 · Accepted Answer · answered Aug 10 '12 at 11:13

If your <script> is in the <head></head> section of your website, then it will start to execute before the page has loaded, and therefore free_shipping and sale will not exist in the DOM.

Try doing the following, which will make your code happen once the page has finished loading...

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

This can also be done using the jquery library, but my knowledge of it is exceedingly limited.

You're welcome @swapnesh, good luck with the rest of your project :-) — freefaller, Aug 10 '12 at 11:38

score 1 · Answer 3 · edited May 23 '17 at 12:20

I think in your case script execution was called early than actual elem was created

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

Should solve your problem, also check this - javascript:how to write $(document).ready like event without jquery

What is wrong with the JS code and let me know if the code can be improve

3 Answers3