関数が初期化された変数を認識しない

Question

謝罪、私はJavascriptで正式なトレーニングを受けていません。ロードの進行状況バーを操作する関数を作成しようとしています。私は完了時に "完了"のクラスに#ammountを追加したいと思います。ただし、クラスは追加されていません。変数が正しく初期化されていると思います。 "ammount" varの代わりにquerySelectorを実行すると動作するようです。誰かがなぜこれが私に当てはまるのか説明できることを願っていますか？とても有難い。

codepen here

(function move() { 
    var ammount = document.getElementById("ammount"); 
    var counter = document.getElementById("counter"); 
    var wrapper = document.getElementById("wrapper"); 
    var status = 1; 
    var loader = setInterval(fireZeLoader, 10); 

    function fireZeLoader() { 
     if (status >= 100) { 
      clearInterval(loader); 
      wrapper.innerHTML = wrapper.innerHTML + '<div class="finished">Complete</div>'; 
      ammount.classList.add("donezo"); 
     } else { 
      status++; 
      ammount.style.width = status + '%'; 
      counter.innerHTML = status + '%'; 
     } 
    } 
}()); 

Answer 1

あなたがwrapper.innerHTMLを変更する場合wrapper内のDOMが再作成されるので、それは起こります。つまり、事前に参照しているすべての参照は、もはや画面上にないオブジェクトを指しています。私は後者をやってお勧めしたい、innerHTMLに割り当てずcarefully modify DOMに

ammount.classList.add("donezo"); 
wrapper.innerHTML = wrapper.innerHTML + '<div class="finished">Complete</div>'; 

別のオプションがある：あなたはこれらの2行を入れ替えることができます。