圖片點擊計數器事件監聽器問題

Question

因此，我正在Udacity課程中為項目創建“ Cat Clicker”。 基本上，我們有5張貓的圖片（我目前有4張），但是每只貓圖片在點擊特定圖片時都應具有自己的點擊計數器。 我知道有一種方法可以使用for循環，但不確定如何使用。 我一直在嘗試為每個單獨的圖像使用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

您正在將事件偵聽器添加到document ，因此無論您單擊與否，無論在哪里單擊圖像， addUp調用addUp函數。

為了將事件附加到特定元素，您必須在該元素上調用addEventListener 。

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

現在，您可以單擊grumpyimage ，它將調用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);

Answer 2

您所犯的錯誤是：

1. 您只需調用一次addUp函數：它將返回“內部”函數的單個實例。 該內部函數具有一個閉包，其中包含一個“ count”變量。 換句話說，您僅對所有圖像使用一個計數器。
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);

對其他圖像重復最后兩行。

需要注意的重要一點是，您調用addUp為每個圖像/計數器對創建一個偵聽器。

當然，有一些更有效的方法可以在不使用閉包的情況下實現上述目的，但是我認為您正在嘗試學習閉包。