JavaScript TypeError Cannot read property style of null

Question

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        lt div id  Night  style  display  none   gt       lt img src  Img night png  style  position  fixed  top  0px  left  5   height  auto  width  100   z-index  -2147483640   gt       lt img src  Img moon gif  style  position  fixed  top  0px  left  5   height  100   width  auto  z-index  -2147483639   gt  lt  div gt    Complete JavaScript        lt script language  JavaScript  gt       lt  --     document write   lt dl gt  lt dd gt        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  lt br gt It is already tomorrow    document write   lt  dl gt          --- gt       lt  script gt    Can someone help me

User · Answer

For me my Script tag was outside the body element. Copied it just before closing the body tag. This worked

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>

User · Answer

Your missing a   after night  right here getElementById  Night

User · Answer

This happens because document write would overwrite your existing code therefore place your div before your javascript code  e g    CSS    mydiv      visibility hidden       Inside your html file   lt div id  mydiv  gt      lt p gt Hello world lt  p gt   lt  div gt   lt script type  text javascript  gt     document getElementById  mydiv   style visibility  visible    lt  script gt    Hope this was helpful

User · Answer

simply I think you are missing a single quote in your code   if   hr  20   document write  Good Night    document getElementById  Night here   style display      it should be like this   if   hr  20   document write  Good Night    document getElementById  Night   style display

User · Answer

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 the if else and which are not  I ve properly closed the  lt  dd gt  tag you were inserting  I ve changed style display       to style display    block    I ve added semicolons at the end of every statement  another good habit to follow     The code    lt div id  Night  style  display  none   gt       lt img src  Img night png  style  position  fixed  top  0px  left  5   height  auto  width  100   z-index  -2147483640   gt       lt img src  Img moon gif  style  position  fixed  top  0px  left  5   height  100   width  auto  z-index  -2147483639   gt   lt  div gt       lt script gt  document write   lt dl gt  lt dd gt     var day   new Date    var hr   day getHours    if  hr    0        document write  Meia-noite  lt br gt J      amanh         else if  hr  lt  5         document write   amp nbsp  amp nbsp Voc   n  o lt br gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp devia lt br gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp estar lt br gt dormindo       else if  hr  lt   11                 document write  Bom dia       else if  hr    12        document write   amp nbsp  amp nbsp  amp nbsp  amp nbsp Vamos lt br gt  amp nbsp almo  ar       else if  hr  lt   17        document write  Boa Tarde      else if  hr  lt   19        document write   amp nbsp Bom final lt br gt  amp nbsp de tarde       else if  hr    20        document write   amp nbsp Boa Noite         document getElementById  Noite   style display  block     else if  hr    21        document write   amp nbsp Boa Noite         document getElementById  Noite   style display  none     else if  hr    22        document write   amp nbsp Boa Noite      else if  hr    23        document write     Meu  J      quase meia-noite       document write   lt  dl gt  lt  dd gt      lt  script gt

User · Answer

I met the same problem  the situation is I need to download flash game by embed tag and H5 game by iframe  I need a loading box there  when the flash or H5 download done  let the loading box display none  well  the flash one work well but when things go to iframe  I cannot find the property  style  of null   so I add a clock to it   and it works  let clock   setInterval      gt            clearInterval clock          clock   null         document getElementById  loading-box   style display    none         200

[javascript] JavaScript TypeError: Cannot read property 'style' of null

Examples related to javascript