JavaScript TypeError: kan eigenschap ‘style’ van null niet lezen

Ik heb JavaScript-code en de onderstaande regel heeft een probleem.

if ((hr==20)) document.write("Good Night"); document.getElementById('Night).style.display=''

FOUT

Uncaught TypeError: Cannot read property 'style' of null at Column 69

Mijn div-taggegevens zijn:

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

Vul JavaScript in:

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

Kan iemand me helpen?

Antwoord 1, autoriteit 100%

In je script, dit deel:

document.getElementById('Noite')

moet nullretourneren en u probeert ook de eigenschap displayin te stellen op een ongeldige waarde. Er zijn een aantal mogelijke redenen waarom dit eerste deel nullis.

1. U voert het script te vroeg uit voordat het document is geladen en daarom kan het item Noiteniet worden gevonden.

2. Er is geen Noiteitem in je HTML.

Ik moet erop wijzen dat uw gebruik van document.write()in dit geval code waarschijnlijk een probleem betekent. Als het document al is geladen, zal een nieuwe document.write()de oude inhoud wissen en een nieuw vers document starten, zodat er geen Noiteitem wordt gevonden.

Als uw document nog niet is geladen en u dus document.write()inline doet om HTML inline aan het huidige document toe te voegen, dan is uw document nog niet volledig geladen, dus dat is waarschijnlijk waarom het het item Noiteniet kan vinden.

De oplossing is waarschijnlijk om dit deel van je script helemaal aan het einde van je document te plaatsen, zodat alles voordat het al is geladen. Dus verplaats dit naar het uiteinde van je lichaam:

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

En zorg ervoor dat er geen document.write()-instructies in javascript zijn nadat het document is geladen (omdat ze het vorige document zullen wissen en een nieuwe zullen starten).

Bovendien heeft het voor mij geen zin om de eigenschap displayin te stellen op "display". De geldige opties daarvoor zijn "block", "inline", "none", "table", enz… Ik ken geen optie met de naam "display"voor die stijleigenschap. Zie hiervoor geldige opties voor de displayeigenschap.

Je kunt de vaste code hier in deze demo zien werken: http://jsfiddle.net/jfriend00/yVJY4 /. Die jsFiddle is zo geconfigureerd dat het javascript aan het einde van de hoofdtekst van het document wordt geplaatst, zodat het wordt uitgevoerd nadat het document is geladen.

P.S. Ik moet erop wijzen dat uw gebrek aan accolades voor uw if-instructies en uw opname van meerdere instructies op dezelfde regel uw code erg misleidend en onduidelijk maakt.

Ik vind het heel moeilijk om erachter te komen wat je vraagt, maar hier is een opgeschoonde versie van je code die werkt en die je ook hier kunt zien werken: http://jsfiddle.net/jfriend00/QCxwr/. Hier is een lijst van de wijzigingen die ik heb aangebracht:

1. Het script bevindt zich in de body, maar achter de inhoud waarnaar het verwijst.
2. Ik heb var-declaraties aan je variabelen toegevoegd (een goede gewoonte om altijd te gebruiken).
3. De if-instructie is veranderd in een if/else, wat een stuk efficiënter is en meer zelfdocumenteert over wat u aan het doen bent.
4. Ik heb beugels voor elke ifverklaring, dus het is absoluut duidelijk welke verklaringen deel uitmaken van de if/elseen dat niet.
5. Ik heb de </dd>Tag die u invoerde.
6. Ik heb style.display = '';naar style.display = 'block';.
7. Ik heb puntkomma’s aan het einde van elke verklaring toegevoegd (een andere goede gewoonte om te volgen).

De 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>

Antwoord 2, Autoriteit 5%

Dit gebeurt omdat document.writezou uw bestaande code overschrijven, plaats daarom uw divvóór uw JavaScript-code. b.v.:

CSS:

#mydiv { 
  visibility:hidden;
 }

In uw HTML-bestand

<div id="mydiv">
   <p>Hello world</p>
</div>
<script type="text/javascript">
   document.getElementById('mydiv').style.visibility='visible';
</script>

Ik hoop dat dit nuttig was

Antwoord 3, Autoriteit 2%

Je mist je ‘s nachts’.
Hier GetelementByID (‘Night

Antwoord 4

Voor mij was mijn script-tag buiten het lichaamselement. Gekopieerd het vlak voor het sluiten van het lichaamstag. Dit werkte

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>

Antwoord 5

Ik denk gewoon dat u een enkele offerte in uw code mist

if ((hr==20)) document.write("Good Night"); document.getElementById('Night"here").style.display=''

het zou zo moeten zijn

if ((hr==20)) document.write("Good Night"); document.getElementById('Night').style.display=''

Antwoord 6

Ik heb hetzelfde probleem ondervonden, de situatie is dat ik flash-game moet downloaden via embed-tag en H5-game per iframe, ik heb daar een laadbox nodig, als de flash- of H5-download klaar is, laat de laadbox er geen weergeven. wel, de flitser werkt goed, maar wanneer dingen naar iframe gaan, kan ik de eigenschap ‘stijl’ van null niet vinden, dus ik voeg er een klok aan toe en het werkt

let clock = setInterval(() => {
        clearInterval(clock)
        clock = null
        document.getElementById('loading-box').style.display = 'none'
    }, 200)