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>

如果您希望每次单击图像时 num 变量都会递增，则需要在函数的外部范围内定义它，以便它在函数调用之间保留该值。

在已定义的变量下添加声明：

var num = 0;

并从函数中删除参数

targetImg.addEventListener('click', (function() {
  num++;
  counterArea.innerHTML = num;
}));

// 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 添加到计数器并显示它