Obtenir l'erreur de type Null avec getelementbyid en html

Je suis frappé au code simple, getelementbyid.innerHtml en page html. Aidez-moi, s'il vous plaît. Obtenir l'erreur de type Null avec getelementbyid en html

<!doctype html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <title>Dom examples</title> 
 
\t \t <script> 
 
\t \t \t var code = document.getElementById("one").innerHTML; 
 
\t \t \t code = code + " !!"; 
 
\t \t \t console.log(code); 
 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 
\t \t <h4> DOM practise page </h4> 
 
\t \t <p id="one"> This page is for practise of DOM model in JS</p> 
 
\t \t <p id="two"> Thank You </p> 
 
\t </body> 
 
</html>

Source

2017-08-05 Satish Marni

Comme élément avec id = un pas chargé encore –

Avez-vous essayé '.innerText' au lieu de' .innerHTML'? – reporter

Votre javascript est appelé avant que votre navigateur rendre votre page HTML. Ainsi, lorsque votre navigateur appelle getElementById, l'ID n'est pas défini.

il suffit de déplacer votre javascript à la fin de votre fichier

Source

2017-08-05 17:20:35 sheplu

Il suffirait de déplacer la balise de script après les balises html. – reporter

il suffit de déplacer le script ci-dessous ... la cause est beacause l'id isnt rendu encore.

<!doctype html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <title>Dom examples</title> 
 
\t \t 
 
\t </head> 
 
\t <body> 
 
\t \t <h4> DOM practise page </h4> 
 
\t \t <p id="one"> This page is for practise of DOM model in JS</p> 
 
\t \t <p id="two"> Thank You </p> 
 
\t </body> 
 
    <script> 
 
\t \t \t var code = document.getElementById("one").innerHTML; 
 
\t \t \t code = code + " !!"; 
 
\t \t \t console.log(code); 
 
\t \t </script> 
 
</html>

Source

2017-08-05 17:21:38

Je suis un nouveau débutant à JS et Html. Votre suggestion m'a aidé !! Merci beaucoup !! Ça a marché :-) –

Utiliser onload propriété de window pour appeler une fonction lorsque window a chargé

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Dom examples</title> 
 
    <script> 
 
    onload = function() { 
 
     var code = document.getElementById("one").innerHTML; 
 
     code = code + " !!"; 
 
     console.log(code); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <h4> DOM practise page </h4> 
 
    <p id="one"> This page is for practise of DOM model in JS</p> 
 
    <p id="two"> Thank You </p> 
 
</body> 
 

 
</html>

Source

2017-08-05 17:22:48 guest271314

mettre juste la partie du script avant que le corps étroit et il sera w ork.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Dom examples</title> 
    </head> 
    <body> 
     <h4> DOM practise page </h4> 
     <p id="one"> This page is for practise of DOM model in JS</p> 
     <p id="two"> Thank You </p> 

     <script> 
      var code = document.getElementById("one").innerHTML; 
      code = code + " !!"; 
      console.log(code); 
     </script> 
    </body> 
</html>

Source

2017-08-05 17:22:53 Fr4NgUs

Browsers parse page html de haut en bas. Donc, si vous mettez votre script dans le head, il sera rendu d'abord, puis votre body. Donc, votre script recherche un identifiant qui n'est pas encore rendu au DOM.

En plaçant script en bas, cela résout votre problème.

<!doctype html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <title>Dom examples</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <h4> DOM practise page </h4> 
 
\t \t <p id="one"> This page is for practise of DOM model in JS</p> 
 
\t \t <p id="two"> Thank You </p> 
 
    <script> 
 
\t \t \t var code = document.getElementById("one"); 
 
\t \t \t code = code.innerHTML + " !!"; 
 
\t \t \t console.log(code); 
 
\t \t </script> 
 
\t </body> 
 
</html>

Source

2017-08-05 17:23:00

Il fonctionne très bien utiliser simplement balise script en fin. Pour plus de clarté, vérifiez. https://jsfiddle.net/djmayank/Lzewxgyw/

HTML

<head> 
     <title>Dom examples</title> 

    </head> 
    <body> 
     <h4> DOM practise page </h4> 
     <p id="one"> This page is for practise of DOM model in JS</p> 
     <p id="two"> Thank You </p> 
    </body>

var code = document.getElementById("one").innerHTML; 
     code = code + " !!"; 
     console.log(code);

Source

2017-08-05 17:23:49 djmayank

Le script est chargé avant votre élément avec l'id d'un est chargé, donc on n'existe pas encore. Vous avez les options suivantes:

Vous placez le script après la balise dont vous avez besoin: <!doctype html> <html lang="en"> <head> <title>Dom examples</title> </head> <body> <h4> DOM practise page </h4> <p id="one"> This page is for practise of DOM model in JS</p> <p id="two"> Thank You </p> <script> var code = document.getElementById("one").innerHTML; code = code + " !!"; console.log(code); </script> </body> </html>
Faire un function et utiliser l'attribut onload, ce qui est préférable, que le code sera réutilisable pour d'autres caractéristiques: <!doctype html> <html lang="en"> <head> <title>Dom examples</title> <script> function myFunction() { var code = document.getElementById("one").innerHTML; code = code + " !!"; console.log(code); } </script> </head> <body> <h4> DOM practise page </h4> <p id="one" onload="myFunction()"> This page is for practise of DOM model in JS</p> <p id="two"> Thank You </p> </body> </html>

Source

2017-08-05 17:29:03

Obtenir l'erreur de type Null avec getelementbyid en html

Répondre

Questions connexes