我有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>
有人可以帮助我吗?
答案 0 :(得分:48)
在你的脚本中,这部分:
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
属性的有效选项,请参阅here。
您可以在此演示中看到固定代码的工作原理:http://jsfiddle.net/jfriend00/yVJY4/。 jsFiddle配置为将javascript放在文档正文的末尾,以便在文档加载后运行。
P.S。我应该指出,你的if
陈述缺乏大括号,并且你在同一行中包含多个陈述会使你的代码非常误导和不清楚。
我很难弄清楚你在问什么,但这里有一个清理过的代码版本,你也可以在这里查看:http://jsfiddle.net/jfriend00/QCxwr/。以下是我所做的更改列表:
var
声明(这是一个总是习惯使用的好习惯)。if
语句已更改为if / else,效率更高,更自我记录您正在做的事情。if
语句添加了大括号,因此绝对清楚哪些语句是if/else
的一部分,哪些不是。{/ li>
</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>
答案 1 :(得分:4)
这是因为document.write
会覆盖您现有的代码,因此请将div
放在您的javascript代码之前。 e.g:
CSS:
#mydiv {
visibility:hidden;
}
在你的html文件中
<div id="mydiv">
<p>Hello world</p>
</div>
<script type="text/javascript">
document.getElementById('mydiv').style.visibility='visible';
</script>
希望这是有帮助的
答案 2 :(得分:1)
您晚上失踪了'。 就在这里 getElementById('晚上
答案 3 :(得分:1)
简而言之,我认为您在代码中缺少单引号
if ((hr==20)) document.write("Good Night"); document.getElementById('Night"here").style.display=''
应该是这样
if ((hr==20)) document.write("Good Night"); document.getElementById('Night').style.display=''
答案 4 :(得分:0)
我遇到了同样的问题,情况是我需要通过嵌入标签和if5的H5游戏下载flash游戏,我需要一个加载盒,当flash或H5下载完成后,让加载框显示无。好吧,flash一个工作得很好但是当事情进入iframe时,我找不到null的属性'style',所以我给它添加一个时钟,它可以工作
let clock = setInterval(() => {
clearInterval(clock)
clock = null
document.getElementById('loading-box').style.display = 'none'
}, 200)
答案 5 :(得分:0)
对我来说,我的Script标签在body元素之外。在关闭body标签之前将其复制。这行得通
enter code here
<h1 id = 'title'>Black Jack</h1>
<h4> by Meg</h4>
<p id="text-area">Welcome to blackJack!</p>
<button id="new-button">New Game</button>
<button id="hitbtn">Hit!</button>
<button id="staybtn">Stay</button>
<script src="script.js"></script>