web-dev-qa-db-fra.com

Javascript ne peut pas trouver l'élément par identifiant?

<html>
<head>
    <title>Test javascript</title>

    <script type="text/javascript">
        var e = document.getElementById("db_info");
        e.innerHTML='Found you';
    </script>
</head>
<body>
    <div id="content">
        <div id="tables">

        </div>        
        <div id="db_info">
        </div>
    </div>
</body>
</html>

Si j'utilise alert(e); cela apparaît null.... et évidemment je n'ai pas de "vous trouvé" à l'écran. Qu'est-ce que je fais mal?

javascriptgetelementbyid
23
Bluemagica

Le problème est que vous essayez d'accéder à l'élément avant qu'il n'existe. Vous devez attendre que la page soit entièrement chargée. Une approche possible consiste à utiliser le gestionnaire onload:

window.onload = function () {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
};

Les bibliothèques JavaScript les plus courantes fournissent cependant un événement prêt pour DOM. C'est mieux, puisque window.onload attend également toutes les images. Vous n'avez pas besoin de cela dans la plupart des cas.

Une autre approche consiste à placer la balise de script juste avant votre fermeture </body>- tag, puisque tout ce qui se trouve devant est chargé au moment de l'exécution, alors.

56
jwueller

Comment le navigateur saura-t-il quand exécuter le code dans la balise de script? Donc, pour exécuter le code une fois la fenêtre complètement chargée,

window.onload = doStuff;

function doStuff() {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
}

L'autre alternative est de garder votre <script...</script> juste avant la fermeture </body> tag.

2
dheerosaur

Exécutez le code soit dans l'événement onload, soit juste avant de fermer la balise body. Vous essayez de trouver un élément qui n'est pas là au moment où vous le faites.

1
Ionuț Staicu

Le script est appelé avant que l'élément n'existe.

Vous devez essayer l'une des méthodes suivantes:

  1. encapsuler du code dans une fonction et utiliser un événement onload de corps pour l'appeler.
  2. mettre le script à la fin du document
  3. utiliser l'attribut defer dans la déclaration de balise de script
1
Dave

Le script est exécuté avant la création du DOM du corps. Mettez tout cela dans une fonction et appelez-le à partir du onload de l'élément body.

0
sjngm