なぜ私のclickNumber変数が選択されたdom要素を保持していないのですか？

クリックイベントハンドラをインクリメントボタンにアタッチするカウンタを作成する必要があります。関数は2つでなければならず、変数は関数外で宣言しなければなりません。 clickNumberの値を読み取ることができないのはなぜですか？私がインクリメント関数内の値を宣言すると、それは機能します。なぜ私のclickNumber変数が選択されたdom要素を保持していないのですか？

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

出典

2017-11-19 Mike

counter.jsスクリプトは#counter要素が作成される前に、即ち、文書head上にロードされています。（要素がまだ存在しないため）

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

nullあるclickNumberもたらす：これは、このコードがあることを意味します。

あなたはDOMがロードされるとclickNumber値を割り当てることによって、この問題を解決することができます

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

出典

2017-11-19 21:25:00 Maluen

は、おかげでそれを手に入れました！ – Mike

なぜ私のclickNumber変数が選択されたdom要素を保持していないのですか？

答えて

関連する問題