JavaScript 类型错误 : Cannot read property 'style' of null

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. 没有 Noite HTML 中的项目。

我应该指出，您使用 document.write()在这种情况下，代码可能表示有问题。如果文档已经加载，则一个新的 document.write()将清除旧内容并开始一个新的文档，所以不会 Noite将找到项目。

如果您的文档尚未加载，因此您正在执行 document.write() inline 将 HTML 内联添加到当前文档，那么您的文档尚未完全加载，因此这可能就是它找不到 Noite 的原因项目。

解决方案可能是将脚本的这一部分放在文档的最后，这样它之前的所有内容都已加载。因此，将其移动到 body 的末端:

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

并且，确保没有 document.write()文档加载后在 JavaScript 中的语句(因为它们会清除前一个文档并开始一个新文档)。

<小时/>

此外，设置 display属性至"display"对我来说没有意义。有效选项是 "block" , "inline" , "none" , "table"等等...我不知道有任何名为 "display" 的选项对于该样式属性。请参阅here对于display的有效选项属性。

您可以在此演示中看到固定代码的工作原理:http://jsfiddle.net/jfriend00/yVJY4/ 。该 jsFiddle 配置为将 javascript 放置在文档正文的末尾，以便它在文档加载后运行。

<小时/>

附注我应该指出你的 if 缺少大括号语句以及在同一行中包含多个语句会使您的代码非常具有误导性且不清楚。

<小时/>

我真的很难弄清楚你在问什么，但这是你的代码的清理版本，你也可以在这里看到它的工作:http://jsfiddle.net/jfriend00/QCxwr/ 。以下是我所做的更改的列表:

1. 脚本位于正文中，但位于其引用的内容之后。
2. 我已添加 var变量声明(始终使用的好习惯)。
3. if语句已更改为 if/else，这对于您正在做的事情来说更加高效且更加 self 记录。
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>