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

因此，我在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>

來源

2017-01-16 Jeff Berlin

你會推薦我用什麼來代替？（對於愚蠢的問題感到抱歉，對此仍然很新） –

點擊監聽器被添加到文檔中，因此它在文檔上任何地方點擊時執行。你必須檢查，點擊的元素是一個貓的圖像。例如。你可以給圖像一個特定的類，並在處理程序檢查中，如果單擊的元素（'e.target'）具有該類。 – Teemu

您所做的錯誤是：

您只需調用addUp函數一次：它將返回「內部」函數的單個實例。該內部函數具有包含單個「計數」變量的閉包。換句話說，所有圖像只使用一個計數器。
您可以將偵聽器添加到文檔中。因此，單擊文檔的任何地方都會調用您的事件偵聽器。

試試這個：

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爲每個圖像/計數器對創建偵聽器。

確實有更高效的方法來實現上述而不使用閉包，但是我收集你正試圖學習閉包。

來源

2017-01-16 19:22:50 Emmanuel

我是哈哈。這工作（對id的一些更改）！非常感謝！ –

你所添加的事件偵聽器document，讓您在任何地方點擊，圖片與否，功能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);

來源

2017-01-16 19:08:25 sabotero

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

回答

相關問題