问题描述
我有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>
有人可以帮我吗?
在您的脚本中,该部分:
document.getElementById('Noite')
必须返回null
,并且您还试图将display
属性设置为无效值.第一部分为null
的原因可能有很多.
-
您正在加载脚本的时间太早,因此无法加载
Noite
项. -
HTML中没有
Noite
项.
我应该指出,在这种情况下,您对document.write()
的使用可能表示一个问题.如果文档已经加载,则新的document.write()
将清除旧内容并启动新的新文档,因此将找不到Noite
项.
如果您的文档尚未加载,因此您正在内联document.write()
以将HTML内联添加到当前文档中,则您的文档尚未完全加载,这可能就是为什么找不到Noite
项.
解决方案可能是将脚本的这一部分放在文档的最后,以便所有内容都已加载.因此,将其移到身体的尽头:
document.getElementById('Noite').style.display='block';
并且,请确保在文档加载后javascript中没有document.write()
语句(因为它们将清除先前的文档并开始一个新的语句).
此外,将display
属性设置为"display"
对我来说没有意义.有效的选项是"block"
,"inline"
,"none"
,"table"
等.我不知道该样式属性的任何名为"display"
的选项.有关display
属性的有效选项,请参见此处. /p>
您可以在此演示中看到固定代码的工作原理: http://jsfiddle.net/jfriend00/yVJY4 /.将该jsFiddle配置为将javascript放在文档正文的末尾,以便它在加载文档后运行.
P.S.我应该指出,您的if
语句缺少花括号,并且在同一行中包含多个语句,这使您的代码非常容易引起误解和不清楚.
我很难弄清您的要求,但是这里有一个有效的代码清理版本,您也可以在这里看到它的工作方式: http://jsfiddle.net/jfriend00/QCxwr/.这是我所做的更改的列表:
- 该脚本位于正文中,但位于其引用的内容之后.
- 我已经在变量中添加了
var
声明(经常使用的好习惯). -
if
语句已更改为if/else,它对您正在执行的操作更加有效且具有更多自说明性. - 我为每个
if
语句都添加了大括号,以便绝对清楚哪些语句是if/else
的一部分,哪些不是. - 我已经正确关闭了您要插入的
</dd>
标签. - 我已将
style.display = '';
更改为style.display = 'block';
. - 我在每条声明的末尾添加了分号(这是另一个要遵循的好习惯).
代码:
<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>
I have JavaScript code and below line has problem.
if ((hr==20)) document.write("Good Night"); document.getElementById('Night).style.display=''
ERROR
Uncaught TypeError: Cannot read property 'style' of null at Column 69
My div tag details are:
<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>
Complete 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>
Can someone help me?
In your script, this part:
document.getElementById('Noite')
must be returning null
and you are also attempting to set the display
property to an invalid value. There are a couple of possible reasons for this first part to be null
.
You are running the script too early before the document has been loaded and thus the
Noite
item can't be found.There is no
Noite
item in your HTML.
I should point out that your use of document.write()
in this case code probably signifies a problem. If the document has already loaded, then a new document.write()
will clear the old content and start a new fresh document so no Noite
item would be found.
If your document has not yet been loaded and thus you're doing document.write()
inline to add HTML inline to the current document, then your document has not yet been fully loaded so that's probably why it can't find the Noite
item.
The solution is probably to put this part of your script at the very end of your document so everything before it has already been loaded. So move this to the end of your body:
document.getElementById('Noite').style.display='block';
And, make sure that there are no document.write()
statements in javascript after the document has been loaded (because they will clear the previous document and start a new one).
In addition, setting the display
property to "display"
doesn't make sense to me. The valid options for that are "block"
, "inline"
, "none"
, "table"
, etc... I'm not aware of any option named "display"
for that style property. See here for valid options for teh display
property.
You can see the fixed code work here in this demo: http://jsfiddle.net/jfriend00/yVJY4/. That jsFiddle is configured to have the javascript placed at the end of the document body so it runs after the document has been loaded.
P.S. I should point out that your lack of braces for your if
statements and your inclusion of multiple statements on the same line makes your code very misleading and unclear.
I'm having a really hard time figuring out what you're asking, but here's a cleaned up version of your code that works which you can also see working here: http://jsfiddle.net/jfriend00/QCxwr/. Here's a list of the changes I made:
- The script is located in the body, but after the content that it is referencing.
- I've added
var
declarations to your variables (a good habit to always use). - The
if
statement was changed into an if/else which is a lot more efficient and more self-documenting as to what you're doing. - I've added braces for every
if
statement so it absolutely clear which statements are part of theif/else
and which are not. - I've properly closed the
</dd>
tag you were inserting. - I've changed
style.display = '';
tostyle.display = 'block';
. - I've added semicolons at the end of every statement (another good habit to follow).
The 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>
这篇关于JavaScript TypeError:无法读取null的属性“样式"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!