图片点击计数器事件侦听器问题
image click counter event listener issues
所以我正在为我的 Udacity 课程中的一个项目创建一个 "Cat Clicker"。基本上,我们有 5 张猫的图片(我目前有 4 张),但是每张猫图片都应该有自己的点击计数器,用于计算特定图片的点击次数。我知道有一种方法可以使用一个 for
循环,但不确定如何使用。我一直在尝试为每个单独的图像使用一个 addeventlistener
,但是它会计算页面上的每次点击(无论在何处)...有人可以找出我 missing/doing 错了什么吗?
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>
您正在将事件侦听器添加到 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);
您犯的错误是:
- 您只调用了一次 addUp 函数:returns 您的 'inner' 函数的单个实例。该内部函数的闭包包含一个 'count' 变量。换句话说,您只对所有图像使用一个计数器。
- 您将侦听器添加到文档中。因此,单击文档的任何位置都会调用您的事件侦听器。
试试这个:
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 为每个 image/counter 对创建一个侦听器。
当然有更有效的方法可以在不使用闭包的情况下实现上述目标,但我了解到您正在尝试学习闭包。
所以我正在为我的 Udacity 课程中的一个项目创建一个 "Cat Clicker"。基本上,我们有 5 张猫的图片(我目前有 4 张),但是每张猫图片都应该有自己的点击计数器,用于计算特定图片的点击次数。我知道有一种方法可以使用一个 for
循环,但不确定如何使用。我一直在尝试为每个单独的图像使用一个 addeventlistener
,但是它会计算页面上的每次点击(无论在何处)...有人可以找出我 missing/doing 错了什么吗?
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>
您正在将事件侦听器添加到 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);
您犯的错误是:
- 您只调用了一次 addUp 函数:returns 您的 'inner' 函数的单个实例。该内部函数的闭包包含一个 'count' 变量。换句话说,您只对所有图像使用一个计数器。
- 您将侦听器添加到文档中。因此,单击文档的任何位置都会调用您的事件侦听器。
试试这个:
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 为每个 image/counter 对创建一个侦听器。
当然有更有效的方法可以在不使用闭包的情况下实现上述目标,但我了解到您正在尝试学习闭包。