Warum speichert meine clickNumber-Variable das ausgewählte dom-Element nicht?

Ich muss einen Zähler machen, der der Inkrement-Schaltfläche einen Click-Event-Handler anhängt. Es muss 2 Funktionen geben und die Variablen müssen außerhalb der Funktionen deklariert werden. Warum kann der Wert clickNumber nicht gelesen werden? Wenn ich den Wert innerhalb der Increment-Funktion deklariere, funktioniert es.Warum speichert meine clickNumber-Variable das ausgewählte dom-Element nicht?

Html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Counter</title> 
    <script src="counter.js"></script> 
</head> 
<body> 

<div> 
    <button id="increment">Increment</button> 
    <p id="counter">Counter = 0</p> 


</div> 


</body> 
</html>

var counter = 0; 
var clickNumber = document.getElementById("counter"); 



function getElementBtnIncrement() { 

    document.getElementById("increment").addEventListener("click",increment,false); 

} 


function increment(){ 
    counter++; 
    clickNumber.innerHTML = "Count = " + counter; 
} 



window.addEventListener("load", getElementBtnIncrement, false);

Quelle

2017-11-19 Mike

counter.js Das Skript wird auf das Dokument geladen head, das heißt, bevor das #counter Element erzeugt wird. Das bedeutet, dass dieser Code:

var clickNumber = document.getElementById("counter");

führt in clickNumbernull zu sein (da das Element noch nicht vorhanden ist).

Sie können dieses Problem beheben, indem Sie den clickNumber Wert zuweisen, sobald das DOM geladen wird:

var counter = 0; 
var clickNumber; // still declared outside, but the value is assigned later 



function getElementBtnIncrement() { 

    document.getElementById("increment").addEventListener("click",increment,false); 

} 


function increment(){ 
    counter++; 
    clickNumber.innerHTML = "Count = " + counter; 
} 



window.addEventListener("load", function() { 
    clickNumber = document.getElementById("counter"); 
    getElementBtnIncrement(); 
}, false);

Quelle

2017-11-19 21:25:00 Maluen

Verstanden, danke! – Mike

Warum speichert meine clickNumber-Variable das ausgewählte dom-Element nicht?

Antwort

Verwandte Themen