image click counterイベントリスナーの問題

Question

私はUdacityコースのプロジェクトで「Cat Clicker」を作成しています。基本的には、私たちは5枚の写真を撮っています（私は現在4枚あります）が、それぞれの写真にはクリック画像が表示されます。私はループを1つ使用する方法があることを知っていますが、その方法はわかりません。私はそれぞれの画像にaddeventlistenerを使用しようとしていましたが、ページ上のどこにあっても（クリックしても）毎回カウントしています...誰かが間違っているか間違っているのか分かりますか？

var sassy = document.createElement("img"); 
 
sassy.src = 'images/cat.jpg'; 
 
sassy.height = "500"; 
 
sassy.width = "640"; 
 
sassy.alt = "Sassy Cat"; 
 
document.getElementById("catimage").appendChild(sassy); 
 

 
var addUp = (function() { 
 
    var count = 0; 
 
    return function() { 
 
    var sassy = document.getElementById("catimage"); 
 
    if (sassy) sassy.innerHTML = "Picture Clicks: " + ++count; 
 
    } 
 
}()); 
 
document.addEventListener("click", addUp, false); 
 

 
var grumpy = document.createElement("img"); 
 
grumpy.src = 'images/grumpy-cat.jpg'; 
 
grumpy.height = "500"; 
 
grumpy.width = "640"; 
 
grumpy.alt = "Grumpy Cat"; 
 
document.getElementById("grumpyimage").appendChild(grumpy); 
 

 
var cuddlecats = document.createElement("img"); 
 
cuddlecats.src = 'images/cuddles.jpg'; 
 
cuddlecats.height = "500"; 
 
cuddlecats.width = "640"; 
 
cuddlecats.alt = "Cuddling Cats"; 
 
document.getElementById("cuddlingcats").appendChild(cuddlecats); 
 

 
var sketchy = document.createElement("img"); 
 
sketchy.src = 'images/sketchycat.jpg'; 
 
sketchy.height = "500"; 
 
sketchy.width = "640"; 
 
sketchy.alt = "Sketchy Cat"; 
 
sketchy.co 
 
document.getElementById("sketchycat").appendChild(sketchy);

<div id="catimage"> 
 
    <figcaption>Sassy Cat</figcaption> 
 
    <h3 id="sassycount">Picture Clicks: 0</h3> 
 
</div> 
 

 
<div id="grumpyimage"> 
 
    <figcaption>Grumpy Cat</figcaption> 
 
    <h3 id="grumpycount">Picture Clicks: 0</h3> 
 
</div> 
 
<div id="cuddlingcats"> 
 
    <figcaption>Cuddling Cats</figcaption> 
 
    <h3 id="cuddlecount">Picture Clicks: 0</h3> 
 
</div> 
 
<div id="sketchycat"> 
 
    <figcaption>Sketchy Cat</figcaption> 
 
    <h3 id="sketchcount">Picture Clicks: 0</h3> 
 
</div>

Answer 1

あなたが作っているエラーは、次のとおりです。

1. addUp関数を1回だけ呼び出します。これは、 '内部'関数の1つのインスタンスを返します。その内部関数には、単一の 'count'変数を含むクロージャがあります。つまり、すべての画像に1つのカウンタしか使用していません。
2. リスナーをドキュメントに追加します。その結果、ドキュメント上をクリックすると、イベントリスナが呼び出されます。

はこれを試してみてください：

var addUp = function(counterId) { 
    var count = 0; 

    return function() { 
    var counterEle = document.getElementById(counterId); 
    if (counterEle) 
     counterEle.innerHTML = "Picture Clicks: " + ++count; 
    } 
}; 

var catImage = document.getElementById("cat-image"); 
catImage.addEventListener("click", addUp("cat-counter-id"), false); 

は、他の画像のための最後の2行を繰り返します。

addUpを呼び出して、各イメージ/カウンタのペアのリスナーを作成することに注意してください。

閉鎖を使わずに上記を達成するより効率的な方法は確かですが、閉鎖を学びたいと思っています。

Answer 2

あなたはdocumentにイベントリスナーを追加しているので、どこでもクリックし、画像やない、機能addUpが呼び出されます。

特定の要素にイベントをアタッチするには、その要素に対してaddEventListenerを呼び出す必要があります。

var grumpyimage = document.getElementById("grumpyimage"); 
grumpyimage.addEventListener("click", addUp, false); 

今、あなたはgrumpyimageをクリックすることができますし、それはあなたが画像ごとに1つのaddUpの機能を持っている必要があり簡単にするためにaddUp を呼び出します。

一つだけaddUp機能を使用して、このようなカウンタのidに基づいてカウンタをインクリメントするためにあなたがこれを一般化する必要がある点に注意してください：

var addUp = function(counterId) { 
    var count = 0; 

    return function() { 
    var counterEle = document.getElementById(counterId); 
    if (counterEle) 
     counterEle.innerHTML = "Picture Clicks: " + ++count; 
    } 
}; 
var grumpyimage = document.getElementById("grumpyimage"); 
grumpyimage.addEventListener("click", addUp("grumpyimage-counter"), false);