Impossibile impostare la proprietà "innerHTML" di null

97

Perché ricevo un errore o un errore di tipo non rilevato: impossibile impostare la proprietà "innerHTML" di null? Pensavo di aver capito innerHTML e di averlo fatto funzionare prima.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>
javascript  onload  innerhtml 
— Joshua W
fonte

Risposte:

170

Devi posizionare il hellodiv prima dello script, in modo che esista quando lo script viene caricato.

— Erik Godard
fonte
17
Se usi window.onload = nome funzione () {} non importa se il div è prima o dopo.
— Colyn1337
1
Soluzione croccante. Ma ricevo ancora l'errore. In chrome / fedora 25 / apache
— Sahu V Kumar
48

Cerchiamo prima di tutto di capire la causa principale del motivo per cui sta accadendo in primo luogo.

Perché ricevo un errore o un errore di tipo non rilevato: impossibile impostare la proprietà "innerHTML" di null?

Il browser carica sempre l'intero HTML DOM dall'alto verso il basso. Qualsiasi codice JavaScript scritto all'interno dei scripttag (presente nella headsezione del file HTML) viene eseguito dal motore di rendering del browser anche prima che l'intero DOM (vari tag di elementi HTML presenti nel tag body) venga caricato. Gli script presenti nel headtag stanno tentando di accedere a un elemento avente id helloanche prima che sia stato effettivamente visualizzato nel DOM. Quindi, ovviamente, JavaScript non è riuscito a vedere l'elemento e quindi si finisce per vedere l'errore di riferimento nullo.

Come puoi farlo funzionare come prima?

Vuoi mostrare il messaggio "ciao" sulla pagina non appena l'utente arriva sulla tua pagina per la prima volta. Quindi è necessario collegare il codice in un punto in cui si è completamente sicuri del fatto che il DOM è completamente caricato e l' helloelemento id è accessibile / disponibile. È realizzabile in due modi:

  1. Riordina i tuoi script : in questo modo i tuoi script vengono attivati ​​solo dopo che il DOM contenente il tuo helloelemento id è già stato caricato. Puoi ottenerlo semplicemente spostando il tag script dopo tutti gli elementi DOM, cioè in fondo dove il bodytag sta finendo. Dal momento che il rendering avviene dall'alto verso il basso, i tuoi script vengono eseguiti alla fine e non devi affrontare errori.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div id="hello"></div>
    
    <script type ="text/javascript">
        what();
        function what(){
            document.getElementById('hello').innerHTML = 'hi';
        };
    </script>
    </body>
    </html>
Espandi lo snippet

  1. Usa hook di eventi : il motore di rendering del browser fornisce un hook-through window.onloadevento basato su eventi che ti dà il suggerimento che il browser ha terminato il caricamento del DOM. Quindi, nel momento in cui questo evento viene attivato, puoi essere certo che il tuo elemento con helloID già caricato nel DOM e qualsiasi JavaScript attivato successivamente che tenta di accedere a questo elemento non fallirà. Quindi fai qualcosa come lo snippet di codice qui sotto. Tieni presente che in questo caso lo script funziona anche se è presente nella parte superiore del documento HTML all'interno del headtag.

<!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type ="text/javascript">
            window.onload = function() {
            what();
            function what(){
                document.getElementById('hello').innerHTML = 'hi';
            };
        }
        </script>
        </head>
        
        <body>
        <div id="hello"></div>
        </body>
        </html>
Espandi lo snippet

— RBT
fonte
Roba buona, ma aggiungerei, non credo che la funzione che fa document.getElementById (..). InnerHTML. deve essere inserito nel file onload. Poiché questo può essere caricato prima del caricamento del DOM e non ci sono errori. Solo la sua chiamata deve essere. jsfiddle.net/fbz6wLpd/8
— barlop
40

Potresti dire a javascript di eseguire l'azione "onload" ... Prova con questo:

<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
— Colyn1337
fonte
11

Metti solo il tuo JS window.onload

window.onload = function() {

        what();

        function what() {
            document.getElementById('hello').innerHTML = 'hi';
        };

    }
— RIYAJ KHAN
fonte
7

La parte JavaScript deve essere eseguita una volta caricata la pagina, quindi si consiglia di inserire lo script JavaScript alla fine del tag body.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>  
</body>
</html>
Espandi lo snippet

— user5323957
fonte
2
Smetti di scrivere in maiuscolo ogni parola che digiti?
— VortexYT
6

Javascript sembra buono. Prova a eseguirlo dopo che il div è stato caricato. Prova a eseguire solo quando il documento è pronto. $(document).readyin jquery.

— JT Nolan
fonte
1
anche gli attributi di tipo nei tag di script sono obsoleti.
— JT Nolan
2
e importare jquery per risolvere questo problema è eccessivo a meno che non si preveda di usarlo per questo progetto qui fuori. window.onloadpotrebbe essere sufficiente ma ci sono anche altri eventi disponibili. window
— Fare riferimento
5 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = '<p>hi</p>';
    };
</script>  
</body>
</html>
Espandi lo snippet

— user6175882
fonte
La tua risposta è corretta, ma posso chiederti di aggiungere un po 'di contesto intorno al tuo codice sorgente. Le risposte di solo codice sono difficili da capire. Aiuterà sia il richiedente che i futuri lettori se puoi aggiungere ulteriori informazioni nel tuo post.
— RBT
3

Ecco il mio frammento provalo. Spero che ti sarà utile. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
  
<div id="hello"></div>
  
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>
Espandi lo snippet

3

Puoi provare a utilizzare il metodo setTimeout per assicurarti che il tuo html venga caricato per primo.

— Eddy
fonte
3

La causa principale è: HTML su una pagina deve essere caricato prima del codice javascript . Risoluzione in 2 modi:

1) Consenti il ​​caricamento dell'HTML prima del codice js.

<script type ="text/javascript">
    window.onload = function what(){
        document.getElementById('hello').innerHTML = 'hi';
    }
</script>

//or set time out like this:
<script type ="text/javascript">
    setTimeout(function(){
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
    }, 50);
    //NOTE: 50 is milisecond.
</script>

2) Sposta il codice js sotto il codice HTML

<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
— Pines Tran
fonte
1 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>
Espandi lo snippet

— user2114253
fonte
il problema è che il primo div html è stato caricato .. rispetto alla chiamata della funzione di script Java ora funziona ...
— user2114253
1

Ho avuto lo stesso problema e si scopre che l'errore nullo era perché non avevo salvato l'html con cui stavo lavorando.

Se l'elemento a cui si fa riferimento non è stato salvato una volta caricata la pagina è 'nullo', perché il documento non lo contiene al momento del caricamento. L'uso di window.onload aiuta anche il debug.

Spero che questo ti sia stato utile.

— plagueanomicPlague
fonte
1

Questo errore può apparire anche se carichi lo script dopo che il rendering html è terminato. In questo esempio, il tuo codice

<div id="hello"></div>

non ha alcun valore all'interno del div. Quindi l'errore viene sollevato, perché non c'è alcun valore da modificare all'interno. Sarebbe dovuto essere

<div id="hello">Some random text to change</div>

poi.

— Marko Slijepčević
fonte
0

Aggiungi jquery in < head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Usa $ document.ready () : il codice può essere in < head>o in un file separato come main.js

1) usando js nello stesso file (aggiungilo nel < head>):

<script>
$( document ).ready(function() {
function what(){
    document.getElementById('hello').innerHTML = 'hi';
};
});
</script>

2) usando qualche altro file come main.js (aggiungilo nel < head>):

<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>

e aggiungi il codice nel file main.js :)

— abe312
fonte
0

Devi trasformarti divin p. Tecnicamente innerHTML significa che è all'interno della <??? id=""></???>parte.

Modificare:

<div id="hello"></div>

in

<p id="hello"></p>

Facendo:

document.getElementById('hello').innerHTML = 'hi';

girerà 

<div id="hello"></div> into this <div id="hello">hi</div>

che in realtà non ha senso.

Puoi anche provare a cambiare:

document.getElementById('hello').innerHTML = 'hi';

in questo 

document.getElementById('hello').innerHTML='<p> hi </p> ';

per farlo funzionare.

— user6175882
fonte
0

L'errore si spiega da solo che non sta ottenendo il tag HTML in cui si desidera impostare i dati Quindi rendere il tag disponibile a JS quindi solo è possibile impostare i dati su quello.

— Shubham
fonte
0

Senza dubbio, la maggior parte delle risposte qui sono corrette, ma puoi anche farlo:

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});
— Shrey Tripathi
fonte
0

Ci sono diverse possibili cause, come discusso vorrei aggiungere questo per qualcuno che potrebbe avere lo stesso problema del mio.

Nel mio caso avevo un div vicino mancante come mostrato di seguito

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   </head>
   <body>
   <div> //I am an open div
    <div id="hello"></div>
   <script type ="text/javascript">
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
   </script>
   </body>
   </html>

La mancanza di un div vicino può comportare una disorganizzazione del trasversale da figlio a genitore o da genitore a figlio con conseguente errore quando si tenta di accedere a un elemento nel DOM

— Proxybee
fonte
Si prega di rispondere come nell'esempio OP.
— mishsx
@mishsx il motivo della mia risposta: ho avuto lo stesso errore e quando ho cercato ho visto le correzioni di tutti ma non era la soluzione nel mio caso, fare la stessa domanda sarebbe stato duplicato, ho sentito qualcun altro potrebbe essere esattamente anche la stessa situazione e ho deciso di pubblicare il mio errore e risolverlo come sostituto ... come puoi vedere è chiaramente indicato nella risposta, quindi sarà utile a quelli nella stessa identica situazione e tuttavia chiaro agli altri che questo non è non è la correzione dell'errore nella domanda. Se questo non va bene, un consiglio gentile su come dovrei fare un errore alternativo e correggere noto senza duplicare
— Proxybee
0

Lascia caricare il DOM. Per fare qualcosa nel DOM devi prima caricarlo. Nel tuo caso devi <div>prima caricare il tag. allora hai qualcosa da modificare. se carichi prima il js, quella funzione sta cercando HTMLdi fare quello che hai chiesto di fare, ma quando quel momento HTMLsta caricando e la tua funzione non può trovare il file HTML. Quindi puoi mettere lo script in fondo alla pagina. all'interno del <body>tag quindi la funzione può accedere al <div>perché DOM è già caricato nel momento in cui si preme lo script.

— HeshanHH
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.