異なるカウンタで1つの変数を制御するにはどうすればいいですか

Question

私はカウンタを設計しましたが、それぞれ3つのボタン（上、下、カウンタを削除）があります。カウンターを追加することができます。それぞれの新しいカウンターは素晴らしいですが、他のカウンターは新しいカウンターから数え続けます。私はnumers nの配列を作成する必要があり、n（i）にはcount（i）が必要ですか？もしそれが本当なら、どうすればいいのですか？

どうすれば修正できますか？

var up = document.getElementsByClassName("up"); 
    var n = 0; 
    for (i = 0; i < up.length; i++) { 
     up[i].addEventListener("click", function(){ 
      var input = this.parentElement.getElementsByClassName("input"); 
        n++; 
        input[0].innerHTML = parseInt(input[0].innerHTML) + 1; 
     }); 
    }; 


    <button class="up">up</button> 
    <div class="input">0</div> 

Answer 1

あなたは各「アップ」と「ダウン」の要素あなたがupDownCounter()

を実行するたびだからページの最初のカウンターはクリックリスナーを毎回取得するイベントリスナーを追加している - あなたが追加した場合console.log()あなたのイベントリスナーの中には、それが古いカウンタのために複数回実行されているのが見えます。

up[i].addEventListener("click", function(){ 
    console.log('up click' 
    ... 
}); 

あなたがカウンターを3つ持っている場合、それが唯一持っていたように、その後、最初のものは、「クリックアップ」3回を記録します上の「アップ」をクリックし、二つ目は、一度それを2回記録し、最新の1になるにはイベントリスナーは一度追加されました。

また、varスコープがオフで、n変数がすべてのカウンタに共通であると思うので、クリックハンドラ内で宣言する必要があります。 あなたは代わりにこれを使用することができます：

input[0].innerHTML = parseInt(input[0].innerHTML) + 1; 

コードはいえ、いくつかのリファクタリングを行うことができ、それ自体が多くのことを繰り返し、従うことが少し難しいです。