0

TypeErrorの取得：document.getElementById("free_shipping")はnull

これは私が試していることです---

これらの2つの特定の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>

HTMLコード

    <!--####### 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、saleDOMには存在しません。

次の手順を試してください。ページの読み込みが完了すると、コードが実行されます...

<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ライブラリを使用して行うこともできますが、私の知識は非常に限られています。

于 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：jqueryを使用せずに$（document）.readyのようなイベントを作成する方法

于 2012-08-10T11:14:58.837 に答える