如何修复无法正常工作的addEventListener?

时间:2019-08-24 19:36:44

标签: javascript addeventlistener

我的代码有两个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开始都是什么,而当我踩到它时什么也不做。

3 个答案:

答案 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}}