document.getElementById funktioniert nicht/Anzeige

Question

Was mache ich hier falsch? Hier

ist der Code:

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

Ich möchte auf der Website die Punkte angezeigt werden soll. Ich verstehe wirklich nicht, warum das nicht funktioniert.

Beachten Sie, dass ich das Skript-Tag in den HTML-Code einfügen. Später werde ich eine externe js-Datei machen und alles hineinlegen.

Answer 1

Es gibt zwei Fehler hier,

1. Sie müssen id mit " (Doppel Quotes) umgeben
2. Sie sollten Script-Tag gesetzt, nachdem das dom Element erstellt wird, sonst es vor dem eigentlichen dom ausführen kann geschaffen. Auch wenn Sie Js-Code in einer separaten Datei speichern, stellen Sie sicher, dass Sie es nach Ihrer dom schreiben, kurz bevor das body-Tag endet.

So sollte Ihr Code sein wie,

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

Arbeits jsFiddle

Answer 2

Sie müssen die DOM in HTML vor dem Skript definieren. Wie diese

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

Answer 3

Sie sollten die Element-ID zwischen den Notierungen werden mit und außerdem ist es empfehlenswert, das DOM-Element vor dem Script-Tag zu haben.

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

Answer 4

Ich glaube, ich sehe hier zwei Probleme.

Die erste ist, dass die document.getElementById eine Zeichenfolge erhalten muss. Sie könnten verwenden: document.getElementById("pointsDisplay").

Zweitens denke ich, dass Sie das Skript unter dem p setzen müssen. Der Browser führt das Skript aus, sobald es das Skript-Tag erreicht.

Answer 5

Die ID-Namen in String und das HTML-Tag sollte es sein sollte zuerst

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

geladen

Answer 6

Alle anderen Antworten hier sind korrekt, aber ich möchte darauf hinweisen, dass das Skript wartet, bis das DOM vor der Ausführung geladen hat, wenn Sie das DOMContentLoaded-Ereignis verwenden.

Eg.

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