document.getElementById ne fonctionne pas/Afficher

Question

Qu'est-ce que je fais de mal ici?

Voici le code:

<script> 
    var points = 1000; 
    document.getElementById(pointsdisplay).innerHTML = "Points:" + points; 
</script> 
<p id="pointsdisplay"></p> 

Je veux afficher les points sur le site. Je ne comprends vraiment pas pourquoi cela ne fonctionne pas.

Notez que je place la balise de script dans le code HTML. Plus tard, je vais faire un fichier js externe et y mettre tout.

Answer 1

Il y a deux erreurs ici,

1. Vous devez entourer id avec " (guillemets doubles)
2. Vous devez mettre balise script après l'élément dom est créé, sinon il peut exécuter avant la dom réelle est créé. Même si vous gardez le code js dans un fichier séparé, assurez-vous de l'écrire après votre dom, juste avant la fin de la balise body.

Donc, votre code devrait être,

<p id="pointsdisplay"></p> 
<script> 
    var points = 1000; 
    document.getElementById('pointsdisplay').innerHTML = "Points:" + points; 
</script> 

travail jsFiddle

Answer 2

Vous devez définir le DOM en HTML avant le script. Comme cela,

<p id="pointsdisplay"></p> 
 
<script> 
 
var points = 1000; 
 
document.getElementById("pointsdisplay").innerHTML = "Points:" + points; 
 
</script>

Answer 3

Vous devriez être d'avoir l'id élément entre les cours et d'ailleurs, il est recommandé d'avoir l'élément DOM avant la balise de script.

<p id="pointsdisplay"></p> 
 
<script> 
 
var points = 1000; 
 
document.getElementById('pointsdisplay').innerHTML = "Points:" + points; 
 
</script>

Answer 4

Je pense que je vois deux problèmes ici.

La première est que le document.getElementById doit recevoir une chaîne. Vous pouvez utiliser: document.getElementById("pointsDisplay"). Deuxièmement, je pense que vous aurez besoin de mettre le script sous le p. Le navigateur exécutera le script dès qu'il aura atteint la balise de script.

Answer 5

Le nom d'identification doit être dans la chaîne et la balise HTML doit charger d'abord

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

 
<!--you have two options --> 
 
<p id="pointsdisplay"></p> 
 
<!--Html tag should be loaded first --> 
 
<script> 
 
var points = 1000; 
 
// the id name should be in string 
 
document.getElementById("pointsdisplay").innerHTML = "Points:" + points; 
 
</script> 
 

 
<!-- second option jquery ready function, so that would wait for the document to be loaded then execute the script --> 
 
<script> 
 
var points = 1000; 
 
$(document).ready(function(){ 
 
document.getElementById("pointsdisplay1").innerHTML = "Points:" + points; 
 
}); 
 
</script> 
 
<p id="pointsdisplay1"></p>

Answer 6

Toutes les autres réponses ici sont correctes cependant je tiens à souligner que si vous utilisez l'événement DOMContentLoaded le script attendra que le DOM soit chargé avant l'exécution.

Par exemple.

<script> 
 
    document.addEventListener("DOMContentLoaded", function(event) { 
 
     var points = 1000; 
 
     document.getElementById("pointsdisplay").innerHTML = "Points:" + points; 
 
    }); 
 
</script> 
 
<p id="pointsdisplay"></p>