图片点击计数器事件监听器问题

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

图片点击计数器事件监听器问题

回答

相关问题