我的代码有两个addEventListener(),第一个很好,但是第二个有问题
let catNames = ['pew', 'haha', 'Tsh', 'bom', 'tok'];
let catPhotos = document.querySelectorAll('li img');
let catNamePlaces = document.querySelectorAll('li p');
let area = document.getElementById('area');
let targetName = document.querySelector('#area p');
let targetImg = document.querySelector('#area img');
let counterArea = document.querySelector('#area div');
for (let i = 0; i < catNames.length; i++) {
catNamePlaces[i].textContent = catNames[i];
}
for (let catPhoto of catPhotos) {
catPhoto.addEventListener('click', function() {
targetImg.src = catPhoto.src;
}, false);
}
let counter = 0;
targetImg.addEventListener('click', (function(num) {
num++;
counterArea.innerHTML = num;
})(counter));
<ul class="container">
<li>
<p></p><img src="cat1.jpg" alt="cat"></li>
<li>
<p></p><img src="cat2.jpg" alt="cat"></li>
<li>
<p></p><img src="cat3.jpg" alt="cat"></li>
<li>
<p></p><img src="cat4.jpg" alt="cat"></li>
<li>
<p></p><img src="cat5.jpg" alt="cat"></li>
</ul>
<div id="area">
<p></p>
<img src="" alt="selectedCat">
<div id="counter"></div>
</div>
我希望从第二个addEventListener开始,它将从0开始,然后每次在targetImg上单击一次,但是每次从1开始都是什么,而当我踩到它时什么也不做。
答案 0 :(得分:2)
let catNames = ['pew', 'haha', 'Tsh', 'bom', 'tok'];
let catPhotos = document.querySelectorAll('li img');
let catNamePlaces = document.querySelectorAll('li p');
let area = document.getElementById('area');
let targetName = document.querySelector('#area p');
let targetImg = document.querySelector('#area img');
let counterArea = document.querySelector('#area div');
for (let i = 0; i < catNames.length; i++) {
catNamePlaces[i].textContent = catNames[i];
}
for (let catPhoto of catPhotos) {
catPhoto.addEventListener('click', function() {
targetImg.src = catPhoto.src;
}, false);
}
let counter = 0;
counterArea.innerHTML = counter;
targetImg.addEventListener('click', function(event) {
counter++;
counterArea.innerHTML = counter;
});
<ul class="container">
<li>
<p></p><img src="cat1.jpg" alt="cat"></li>
<li>
<p></p><img src="cat2.jpg" alt="cat"></li>
<li>
<p></p><img src="cat3.jpg" alt="cat"></li>
<li>
<p></p><img src="cat4.jpg" alt="cat"></li>
<li>
<p></p><img src="cat5.jpg" alt="cat"></li>
</ul>
<div id="area">
<p></p>
<img src="" alt="selectedCat">
<div id="counter"></div>
</div>
答案 1 :(得分:0)
// this part does not change
let catNames = ['pew', 'haha', 'Tsh', 'bom', 'tok'];
let catPhotos = document.querySelectorAll('li img');
let catNamePlaces = document.querySelectorAll('li p');
let area = document.getElementById('area');
let targetName = document.querySelector('#area p');
let targetImg = document.querySelector('#area img');
let counterArea = document.querySelector('#counter');
for (let i = 0; i < catNames.length; i++) {
catNamePlaces[i].textContent = catNames[i];
}
// since here there is some changes
var counter = 0;
for (let catPhoto of catPhotos) {
console.log(catPhoto)
catPhoto.addEventListener('click', function() {
targetImgFun(catPhoto.src); // call new function with cat src
}, false);
}
function targetImgFun(src) {
targetImg.src = src; // update src
counter++; // counter +1
counterArea.innerHTML = counter; // update counter output
}
添加功能以获取特定目标,然后将+1添加到计数器并显示
答案 2 :(得分:0)
如果您希望每次单击图像时都增加var num = 0;
变量,则需要在函数的外部范围内对其进行定义,以使其保留函数调用之间的值。
在已经定义的变量下面添加声明:
targetImg.addEventListener('click', (function() {
num++;
counterArea.innerHTML = num;
}));
并从函数中删除参数
{{1}}