javascript - JavaScript TypeError: null のプロパティ 'style' を読み取れません

Question

JavaScript コードがあり、以下の行に問題があります。

if ((hr==20)) document.write("Good Night"); document.getElementById('Night).style.display=''

エラー

Uncaught TypeError: Cannot read property 'style' of null at Column 69

私のdivタグの詳細は次のとおりです。

    <div id="Night" style="display: none;">
    <img src="Img/night.png" style="position: fixed; top: 0px; left: 5%; height: auto; width: 100%; z-index: -2147483640;">
    <img src="Img/moon.gif" style="position: fixed; top: 0px; left: 5%; height: 100%; width: auto; z-index: -2147483639;"></div>

完全な JavaScript:

    <script language="JavaScript">
    <!--
    document.write("<dl><dd>")
    day = new Date()
    hr = day.getHours()
    if ((hr==1)||(hr==2)||(hr==3)||(hr==4) || (hr==5)) document.write("Should not you be sleeping?")
    if ((hr==6) || (hr==7) || (hr==8) || (hr==9) || (hr==10) || (hr==11)) document.write("Good Morning!")
    if ((hr==12)) document.write("Let's have lunch?")
    if ((hr==13) || (hr==14) || (hr==15) || (hr==16) || (hr==17)) document.write("Good afternoon!")
    if ((hr==18) || (hr==19)) document.write("Good late afternoon!")
    if ((hr==20)) document.write("Good Night"); document.getElementById('Night').style.display=''
    if ((hr==21)) document.write("Good Night"); document.getElementById('Night').style.display='none'
    if ((hr==22)) document.write("Good Night")
    if (hr==23) document.write("Oh My! It's almost midnight!")
    if (hr==0) document.write("Midnight!<br>It is already tomorrow!") document.write("</dl>")
    //--->
    </script>

誰かが私を助けることができますか？

Answer 1

あなたのスクリプトでは、この部分：

document.getElementById('Noite')

また、プロパティを無効な値nullに設定しようとしています。displayこの最初の部分がnull.

1. ドキュメントが読み込まれる前にスクリプトを実行しているため、Noiteアイテムが見つかりません。

2. NoiteHTML に項目がありません。

document.write()この場合のコードの使用は、おそらく問題を意味することを指摘しておく必要があります。ドキュメントが既に読み込まれている場合、newdocument.write()は古いコンテンツをクリアし、新しい新しいドキュメントを開始するため、Noiteアイテムは見つかりません。

ドキュメントがまだロードされておらずdocument.write()、現在のドキュメントに HTML インラインを追加するためにインラインを実行している場合、ドキュメントはまだ完全にロードされていないため、アイテムが見つからない可能性がありNoiteます。

解決策はおそらく、スクリプトのこの部分をドキュメントの最後に配置して、それ以前のすべてが既に読み込まれているようにすることです。したがって、これを体の最後に移動します。

document.getElementById('Noite').style.display='block';

document.write()また、ドキュメントがロードされた後に JavaScript にステートメントがないことを確認してください (前のドキュメントをクリアして新しいドキュメントを開始するため)。

---

さらに、displayプロパティをに設定"display"しても意味がありません。そのための有効なオプションは、、、、など"block"です"inline"...そのスタイル プロパティに指定されたオプションを知りません。プロパティの有効なオプションについては、こちらを参照してください。"none""table""display"display

このデモで修正されたコードの動作を確認できます: http://jsfiddle.net/jfriend00/yVJY4/。その jsFiddle は、JavaScript がドキュメント本体の最後に配置されるように構成されているため、ドキュメントが読み込まれた後に実行されます。

---

ifPSステートメントに中括弧がなく、同じ行に複数のステートメントを含めると、コードが非常に誤解を招き、不明確になることを指摘しておきます。

---

私はあなたが何を求めているのか理解するのに本当に苦労していますが、これはあなたのコードのクリーンアップされたバージョンです。私が行った変更のリストは次のとおりです。

1. スクリプトは本文にありますが、参照しているコンテンツの後にあります。
2. 変数に宣言を追加しましvarた (常に使用することをお勧めします)。
3. ステートメントは if/else に変更されました。ifこれは、はるかに効率的で、何をしているのかをより自己文書化しています。
4. すべてのステートメントに中かっこを追加しifたので、どのステートメントが の一部で、どのステートメントがそうでないかが完全に明確にif/elseなります。
5. </dd>挿入していたタグを適切に閉じました。
6. に変わりstyle.display = '';ましたstyle.display = 'block';。
7. すべてのステートメントの最後にセミコロンを追加しました (従うべきもう 1 つの良い習慣です)。

コード：

<div id="Night" style="display: none;">
    <img src="Img/night.png" style="position: fixed; top: 0px; left: 5%; height: auto; width: 100%; z-index: -2147483640;">
    <img src="Img/moon.gif" style="position: fixed; top: 0px; left: 5%; height: 100%; width: auto; z-index: -2147483639;">
</div>    
<script>
document.write("<dl><dd>");
var day = new Date();
var hr = day.getHours();
if (hr == 0) {
    document.write("Meia-noite!<br>Já é amanhã!");
} else if (hr <=5 ) {
    document.write("&nbsp;&nbsp;Você não<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;devia<br>&nbsp;&nbsp;&nbsp;&nbsp;estar<br>dormindo?");
} else if (hr <= 11) {         
    document.write("Bom dia!");
} else if (hr == 12) {
    document.write("&nbsp;&nbsp;&nbsp;&nbsp;Vamos<br>&nbsp;almoçar?");
} else if (hr <= 17) {
    document.write("Boa Tarde");
} else if (hr <= 19) {
    document.write("&nbsp;Bom final<br>&nbsp;de tarde!");
} else if (hr == 20) {
    document.write("&nbsp;Boa Noite"); 
    document.getElementById('Noite').style.display='block';
} else if (hr == 21) {
    document.write("&nbsp;Boa Noite"); 
    document.getElementById('Noite').style.display='none';
} else if (hr == 22) {
    document.write("&nbsp;Boa Noite");
} else if (hr == 23) {
    document.write("Ó Meu! Já é quase meia-noite!");
}
document.write("</dl></dd>");
</script>

Answer 2

これはdocument.write、既存のコードを上書きするためdiv、javascript コードの前に配置するために発生します。例えば：

CSS:

#mydiv { 
  visibility:hidden;
 }

あなたのhtmlファイルの中に

<div id="mydiv">
   <p>Hello world</p>
</div>
<script type="text/javascript">
   document.getElementById('mydiv').style.visibility='visible';
</script>

これが役に立ったことを願っています

Answer 3

night の後に ' (一重引用符) がありません。ここでgetElementById('Night