JavaScript TypeError:无法读取 null 的属性“样式”

IT技术 javascript
2021-03-09 17:20:58

我有 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>

有人能帮我吗?

6个回答

在您的脚本中,这部分:

document.getElementById('Noite')

必须返回null并且您还试图将该display属性设置为无效值。这第一部分有几个可能的原因null

  1. 您在加载文档之前过早地运行脚本,因此Noite无法找到项目。

  2. Noite您的 HTML 中没有项目。

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

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

解决方案可能是将脚本的这一部分放在文档的最后,以便在加载之前的所有内容都已加载。所以把它移到你身体的末端:

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

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


此外,将display属性设置为"display"对我来说没有意义。其有效选项是"block""inline""none""table"等...我不知道有任何"display"为该样式属性命名选项请参阅此处了解有关display财产的有效选项

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


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


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

  1. 脚本位于正文中,但在它所引用的内容之后。
  2. 我已经var为您的变量添加了声明(始终使用的好习惯)。
  3. if语句已更改为 if/else,这对于您正在执行的操作而言效率更高且更能自我记录。
  4. 我为每条if语句都添加了大括号,因此非常清楚哪些语句是 the 的一部分,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>
@JK-ASP - 那么除了我已经回答的问题之外,你还有什么问题?当 div 也包含图像时,我的建议代码工作得很好:jsfiddle.net/jfriend00/bSnnG
2021-04-21 17:20:58
拉伸 document.getElementById ('Night')。style.display ='' 用于显示 div,这个 div 只是一个月亮的 gif,晚上 8 点应该显示在背景中。
2021-04-27 17:20:58
@JK-ASP - 那么你的页面/脚本还有其他问题。从我的两个演示中可以清楚地看出,如果实施得当,这个概念是可行的。没有看到指向您的实际页面的链接或放入 jsFiddle 的问题演示,我们无能为力。这个概念已经向你解释过了。如果您没有在我们看不到的页面中正确实施该概念,那么我们将无能为力。
2021-05-05 17:20:58
这个脚本显示了一句话这些时间是要显示一个 gif 月亮这么黑,越是显示不起作用...:/
2021-05-13 17:20:58
@JK-ASP - 我不知道你的评论是什么意思。如果您想让我向您展示它如何处理您的 HTML,您必须公开您尚未完成的 HTML。脚本的重点是使 div 可见,而我建议的代码就是这样做的。div 可以包含图像或文本或其他 div 或您想要的任何内容。请注意我最近的编辑,您还必须将display值设置为有效参数。您将其设置"display"为无效的 CSS 选项。
2021-05-15 17:20:58

发生这种情况是因为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>

希望这有帮助

只是我认为您的代码中缺少单引号

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=''

您在晚上之后缺少一个 '(单引号)。就在这里getElementById('Night

对我来说,我的 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>