JavaScriptキャッシングDOM要素奇妙なエラー

Question

変数に格納されていないドキュメント要素を取得するための呼び出しを行った後でコードが機能するのはわかりません。私はいくつかのDOM参照を変数に格納しようとしていますが、私が格納しようとしているDOM要素の操作をプリフォームしない限り、私のコードはDOMと相互作用しません。しかし、私が1つのDOM要素に対して操作を実行した後、他の変数は、元々意図していたとおり、DOMとのインタフェースを可能にします。私は2つのJSFiddlesをリンクしています。最初のものはエラーのあるもので、2番目のものはバンド支援の修正です。また、変更が行われた場所のJavaScriptコードが強調表示されています。おかげさまで

https://jsfiddle.net/spencerduball/sLac9t3y/

https://jsfiddle.net/spencerduball/yyrjazLw/

(function() { 
/* ----- VARIABLES ----- */ 
var score0, score1, current0, current1; 

scoreO = document.getElementById('score-0'); 
score1 = document.getElementById('score-1'); 

current0 = document.getElementById('current-0'); 
current1 = document.getElementById('current-1'); 


/* ----- FUNCTIONS ----- */ 
function reset() { 
    // BANDAID FIX HERE 
    document.getElementById('score-0').textContent = '0'; 
    // END 

    score1.textContent = '0'; 
    current0.textContent = '0'; 
    current1.textContent = '0'; 

}; 
reset(); 

}()); 

Answer 1

あなたの変数はscore0として宣言されています。

var score0, score1, current0, current1; 

ただし、scoreOに割り当てています。 （代わりに数字のゼロの首都 "O"。）

scoreO = document.getElementById('score-0'); 

---

いくつかのソリューションは、次のとおりです。

• とにかく

  を即時割り当てをやっているので、VARSを事前に宣言しないでください

  var score0 = document.getElementById('score-0'); 
  // same for the others 
  

• 宣言されていない変数への代入に関する有用なエラーメッセージを取得するには、「strictモード」を使用し

  (function() { 
      "use strict"; 
      /* ----- VARIABLES ----- */ 
  

• ESLintまたはJSHintのようなリンターを使用してください。これらは、さまざまなタイプの一般的なプログラミングエラーを通知し、長期的にはの時間を保存します。