web-dev-qa-db-fra.com

Impossible de définir la propriété 'innerHTML' sur null

Pourquoi est-ce que je reçois une erreur ou uncaught TypeError: Je ne peux pas définir la propriété 'innerHTML' sur null? Je pensais avoir compris innerHTML et que cela fonctionnait auparavant.

<!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>
javascriptonloadinnerhtml
52
Joshua W

Vous devez placer le bonjour div avant le script, afin qu'il existe lors du chargement du script. 

94
Erik Godard

Vous devez dire à javascript pour exécuter l'action "onload" ... Essayez avec ceci:

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

Je vois que tous les techniciens ont fourni la solution sur la façon de se débarrasser du problème mais personne n’a répondu à la raison ou à la cause profonde de la raison pour laquelle cela se produit en premier lieu.

Pourquoi est-ce que je reçois une erreur ou Uncaught TypeError: Impossible de définir la propriété 'innerHTML' de null?

Tout code javascript écrit à l'intérieur des balises script (présent dans la section head de votre fichier HTML) est exécuté par le moteur de rendu du navigateur même avant que votre DOM entier ne soit chargé. Le navigateur charge l'intégralité du DOM HTML de haut en bas. Les scripts présents dans la balise head tentent d'accéder à un élément ayant l'ID hello avant même qu'il ait été restitué dans le DOM. Donc, évidemment, JavaScript n'a pas réussi à voir l'élément et vous avez donc fini par voir l'erreur de référence nulle.

Comment pouvez-vous le faire fonctionner comme avant?

Vous souhaitez afficher le message "hi" sur la page dès que l'utilisateur atterrit sur votre page pour la première fois. Vous devez donc connecter votre code à un moment où vous êtes complètement sûr du fait que DOM est entièrement chargé et que l'élément hello id est accessible/disponible. Il est réalisable de deux manières:

  1. Réorganisez vos scripts : Ainsi, vos scripts ne sont déclenchés que lorsque le DOM contenant votre élément hello id est déjà chargé. Vous pouvez y parvenir en déplaçant simplement la balise de script après tous les éléments DOM, c'est-à-dire au bas de la balise body. Comme le rendu s'effectue de haut en bas, vos scripts sont exécutés à la fin et vous ne faites face à aucune erreur.

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

  1. Utilisation de la connexion d'événements : le moteur de rendu du navigateur fournit un événement de connexion via window.onload qui vous indique que le navigateur a terminé le chargement du DOM. Donc, au moment où cet événement est déclenché, vous pouvez être assuré que votre élément avec hello id déjà chargé dans le DOM et que tout javascript déclenché par la suite qui tente d'accéder à cet élément n'échoue pas. Donc, vous faites quelque chose comme extrait de code ci-dessous. Veuillez noter que dans ce cas, votre script fonctionne même s'il se trouve en haut de votre document HTML dans la balise head. 

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

14
RBT

Il suffit de mettre votre JS dans window.onload

window.onload = function() {

        what();

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

    }
5
RIYAJ KHAN

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

4
user6175882

Javascript a l'air bien. Essayez de l'exécuter après le chargement de la div. Essayez de n'exécuter que lorsque le document est prêt. $(document).ready in jquery.

3
JT Nolan

Vous pouvez essayer d’utiliser la méthode setTimeout pour vous assurer que votre code HTML se charge en premier.

2
Eddy

La partie JavaScript doit être exécutée une fois la page chargée. Il est donc conseillé de placer le script JavaScript à la fin du corps. 

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

2
user5323957

Voici mon extrait essayez-le. J'espère que cela vous sera 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>

2
user4909217

Cette erreur peut apparaître même si vous chargez votre script une fois le rendu html terminé. Dans cet exemple donné votre code

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

n'a aucune valeur à l'intérieur de la div. Donc, l'erreur est générée, car il n'y a pas de valeur à changer à l'intérieur. Ça aurait dû être

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

puis.

0
Marko Slijepčević

Ajouter jquery dans < head>

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

Utilisez $ document.ready () : le code peut être en < head> ou dans un fichier séparé comme main.js

1) en utilisant js dans le même fichier (ajoutez ceci dans le < head>):

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

2) en utilisant un autre fichier comme main.js (ajoutez ceci dans le < head>):

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

et ajoutez le code dans le fichier main.js :)

0
abe312

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

0
user2114253

Vous devez changer div en p. Techniquement, innerHTML signifie qu'il se trouve dans la partie <??? id=""></???>.

Changement:

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

dans

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

Faire:

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

tournera 

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

ce qui n'a pas de sens.

Vous pouvez aussi essayer de changer:

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

dans cette 

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

pour le faire fonctionner.

0
user6175882

J'ai eu le même problème et il s'est avéré que l'erreur nulle était due au fait que je n'avais pas enregistré le code HTML avec lequel je travaillais. 

Si l'élément auquel il est fait référence n'a pas été enregistré une fois la page chargée, la valeur est "null", car le document ne le contient pas au moment du chargement. L'utilisation de window.onload facilite également le débogage.

J'espère que cela vous a été utile.

0
plagueanomicPlague

La cause principale est: HTML sur une page doit être chargé avant le code javascript . Résoudre de 2 manières:

1) Autoriser le chargement HTML avant le code 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) Déplacez le code js sous le code HTML

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