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

时间:2017-01-16 18:48:38

标签: javascript html addeventlistener click-counting

所以我正在创造一个" Cat Clicker"在我的Udacity课程中的项目。基本上,我们有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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您正在将事件监听器添加到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);

答案 1 :(得分:0)

您所犯的错误是:

  1. 只调用一次addUp函数:它返回“内部”函数的单个实例。那个内部函数有它的闭包,它包含一个'count'变量。换句话说,您只对所有图像使用一个计数器。
  2. 您将侦听器添加到文档中。因此,点击文档的任何地方都会调用您的事件监听器。
  3. 试试这个:

    mymodel.objects.filter(id__in=[my_ids])

    对其他图像重复最后两行。

    需要注意的重要一点是,您调用addUp为每个图像/计数器对创建一个侦听器。

    在没有使用闭包的情况下,有一些更有效的方法可以实现上述目标,但我认为你正试图学习闭包。