[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない

質問

HTMLとJavascriptのコードは次のとおりです。

HTMLです。

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

次の行でエラーが発生します。

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

以下のようなエラーが発生しました。

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

解決方法は？

スクリプトの中の、この部分。

document.getElementById('Noite')

を返さなければなりません。 null を設定しようとしており、さらに display プロパティに無効な値を設定する必要があります。この最初の部分には、いくつかの理由が考えられます。 null .

1. ドキュメントが読み込まれる前にスクリプトを実行しすぎているので Noite の項目が見つかりません。

2. はありません。 Noite という項目がHTMLに含まれています。

を使用していることを指摘しておきます。 document.write() この場合、おそらく問題があることを意味しています。もしドキュメントがすでに読み込まれているのであれば、新しい document.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がドキュメントボディの最後に配置されるように設定されているため、ドキュメントが読み込まれた後に実行されます。

P.S. if また、同じ行に複数のステートメントが含まれているため、あなたのコードは非常に誤解を招きやすく、不明瞭です。

何を質問されているのか理解するのにとても苦労しているのですが、あなたのコードのクリーンアップ版が動作しているのをここで見ることができます。 http://jsfiddle.net/jfriend00/QCxwr/ . 以下は、私が行った変更の一覧です。

1. スクリプトはボディに配置されますが、参照するコンテンツの後に配置されます。
2. を追加しました。 var の宣言を変数に追加します (常に使用する良い習慣です)。
3. その if 文は if/else に変更され、より効率的で、何をやっているのかがわかるようになりました。
4. に対して中括弧を追加しました。 if の一部であることを明確にするためです。 if/else で、どれがそうでないのか。
5. をきちんと閉じています。 </dd> タグを挿入していましたね。
6. を変更しました。 style.display = ''; から style.display = 'block'; .
7. すべての文の最後にセミコロンを付けました（これも良い習慣です）。

コードです。

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