Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
382 views
in Technique[技术] by (71.8m points)

javascript - JavaScript TypeError:无法读取null的属性“style”(JavaScript TypeError: Cannot read property 'style' of null)

I have JavaScript code and below line has problem.(我有JavaScript代码,下面的行有问题。)

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标签详细信息是:)

    <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:(完整的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?(有人能帮我吗?)

  ask by JK - ASP translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.(必须返回null并且您还尝试将display属性设置为无效值。)

There are a couple of possible reasons for this first part to be null .(第一部分为null可能有几个可能的原因。)
  1. You are running the script too early before the document has been loaded and thus the Noite item can't be found.(您在加载文档之前过早运行脚本,因此无法找到Noite项目。)

  2. There is no Noite item in your HTML.(您的HTML中没有Noite项。)

I should point out that your use of document.write() in this case code probably signifies a problem.(我应该指出,在这种情况下使用document.write()代码可能意味着一个问题。)

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.(如果文档已经加载,那么新的document.write()将清除旧内容并启动一个新的新文档,因此不会找到Noite项目。)

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.(如果您的文档尚未加载,因此您正在使用document.write()内联将HTML内联添加到当前文档中,那么您的文档尚未完全加载,这可能是它无法找到Noite项目的原因。)

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).(并且,确保在加载文档后javascript中没有document.write()语句(因为它们将清除以前的文档并开始一个新文档)。)


In addition, setting the display property to "display" doesn't make sense to me.(另外,将display属性设置为"display"对我来说没有意义。)

The valid options for that are "block" , "inline" , "none" , "table" , etc... I'm not aware of any option named "display" for that style property.(它的有效选项是"block""inline""none""table"等...我不知道该样式属性的任何名为"display"选项。) See here for valid options for teh display property.(有关display属性的有效选项,请参见此处 。)

You can see the fixed code work here in this demo: http://jsfiddle.net/jfriend00/yVJY4/ .(您可以在此演示中看到固定代码的工作原理: 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.(jsFiddle被配置为将javascript放置在文档正文的末尾,以便在文档加载后运行。)

PS 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.(PS我应该指出,你的if语句缺少括号,并且在同一行中包含多个语句会使你的代码非常误导和不清楚。)


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/ .(我很难弄清楚你在问什么,但是这里有一个清理版的代码,你也可以在这里找到它的工作: http//jsfiddle.net/jfriend00/QCxwr/ 。)

Here's a list of the changes I made:(这是我所做的更改列表:)
  1. The script is located in the body, but after the content that it is referencing.(该脚本位于正文中,但是在它引用的内容之后。)
  2. I've added var declarations to your variables (a good habit to always use).(我已经为你的变量添加了var声明(一直习惯的好习惯)。)
  3. 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.(if语句被更改为if / else,这对于你正在做的事情来说效率更高,更自我记录。)
  4. I've added braces for every if statement so it absolutely clear which statements are part of the if/else and which are not.(我已经为每个if语句添加了大括号,因此它绝对清楚哪些语句是if/else一部分,哪些不是。)
  5. I've properly closed the </dd> tag you were inserting.(我已正确关闭您插入的</dd>标记。)
  6. I've changed style.display = '';(我改变了style.display = '';) to style.display = 'block';(to style.display = 'block';) .(。)
  7. 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("&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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...