JavaScript样式:无法读取null的属性“TypeError”
我有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>有人能帮我吗？
回答 8
Stack Overflow用户
发布于 2013-10-08 05:47:18
在您的脚本中，这一部分：
document.getElementById('Noite')必须返回null，并且您还试图将display属性设置为无效值。第一部分是null，有几个可能的原因。
- 在加载文档之前运行脚本的时间太早，因此找不到
Noite项。 - 您的HTML中没有
Noite项。
我应该指出，在本例中使用document.write()的代码可能表示有问题。如果文档已经加载，则新的document.write()将清除旧内容并开始一个新的新文档，因此将找不到Noite项。
如果您的文档尚未加载，因此您正在执行document.write() inline来将HTML添加到当前文档中，那么您的文档还没有完全加载，所以这可能就是它找不到Noite项的原因。
解决方案可能是将脚本的这一部分放在文档的最后，这样在它之前的所有内容都已经加载。所以把这个移到你身体的尽头：
document.getElementById('Noite').style.display='block';而且，确保在装入文档后javascript中没有document.write()语句(因为它们将清除前一个文档并启动一个新文档)。
此外，将display属性设置为"display"对我来说没有任何意义。有效的选项有"block"、"inline"、"none"、"table"等。我不知道该样式属性有任何名为"display"的选项。有关display属性的有效选项，请参见here。
您可以在以下演示中看到修复后的代码工作：http://jsfiddle.net/jfriend00/yVJY4/。该jsFiddle被配置为将javascript放在文档主体的末尾，以便在加载文档之后运行。
附注:我应该指出，您的if语句缺少大括号，并且在同一行中包含多个语句，这会使您的代码非常具有误导性和模糊性。
我真的很难弄明白你在问什么，但这里有一个你的代码的清理版本，你也可以在这里看到它的工作：http://jsfiddle.net/jfriend00/QCxwr/。以下是我所做的更改的列表：
- 脚本位于正文中，但是在它是的内容之后，将
var声明添加到您的变量中(这是一个经常使用的好习惯)。 -
if语句被更改为if/else，对于您正在执行的操作，它的效率和自我文档化程度要高得多。 - 我为每个
if语句添加了大括号，以便完全清楚哪些语句是if/else的一部分，哪些不是。
<代码>H144我已经正确地关闭了<
- >D45if>标记you are
if/else/code> - 我已经把
style.display = '';改成了/code>，在每句话的末尾加了分号(这是另一个好习惯)。
代码：
<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(" Você não<br> devia<br> estar<br>dormindo?");
} else if (hr <= 11) {
document.write("Bom dia!");
} else if (hr == 12) {
document.write(" Vamos<br> almoçar?");
} else if (hr <= 17) {
document.write("Boa Tarde");
} else if (hr <= 19) {
document.write(" Bom final<br> de tarde!");
} else if (hr == 20) {
document.write(" Boa Noite");
document.getElementById('Noite').style.display='block';
} else if (hr == 21) {
document.write(" Boa Noite");
document.getElementById('Noite').style.display='none';
} else if (hr == 22) {
document.write(" Boa Noite");
} else if (hr == 23) {
document.write("Ó Meu! Já é quase meia-noite!");
}
document.write("</dl></dd>");
</script>Stack Overflow用户
发布于 2016-04-29 14:06:01
这是因为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>希望这能对你有所帮助
Stack Overflow用户
发布于 2018-06-20 06:06:53
你在晚上之后遗漏了一个‘(单引号)。就在这里，getElementById('Night
https://stackoverflow.com/questions/19235345
复制相似问题
腾讯云开发者
