addEventListener 无法正常工作

Question

我是 JS 的新手，目前正在从多个不同的来源学习，这是我用 vanilla js 构建的一个简单的 catclicker 游戏。 第 75 行 - 我有一个 addeventlistner，即使在它不再被选中后仍被调用。例如，即使不再选择猫，它也会继续计数。

这些是说明：

视觉效果
1.应用应该显示
2. 至少 5 只猫的列表，按名称列出
3. 显示选中猫的区域

在猫展示区，应该展示以下内容
1.the猫的名字
2.a 猫的图片
3.text 显示点击次数
4.The 布局的细节无关紧要，因此您可以随意设置样式。

互动
1.When 在列表中单击一只猫的名字，猫显示区域应更新以显示所选猫的数据。
2.猫区域的点击次数对每只猫来说都是唯一的，点击猫的图片时应该增加。

   var cats = [{
     name: "Mr. Nibbles",
     img: 'http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg',
     count: 0,
     id: 1
   }, {
     name: "Paws",
     img: "https://www.petfinder.com/wp-content/uploads/2012/11/99233806-bringing-home-new-cat-632x475.jpg",
     count: 0,
     id: 2
   }, {
     name: "Sphyx",
     img: "https://drpem3xzef3kf.cloudfront.net/photos/pets/31905196/1/?bust=1429232863&width=632&no_scale_up=1",
     count: 0,
     id: 3
   }, {
     name: "Millo",
     img: "https://drpem3xzef3kf.cloudfront.net/photos/pets/31905196/3/?bust=1429232864&width=632&no_scale_up=1",
     count: 0,
     id: 4
   }, {
     name: "Meowister",
     img: "https://drpem3xzef3kf.cloudfront.net/photos/pets/31505696/2/?bust=1425080994&width=632&no_scale_up=1",
     count: 0,
     id: 5
   }]

   function catList(array) {

     var listArea = document.getElementsByClassName('ListArea');

     for (var i = 0; i < array.length; i++) {
       var list = document.createElement('li');
       list.className = ("cat");
       list.innerHTML = array[i].name;

       listArea[0].appendChild(list);

       var elem = document.getElementsByClassName('cat');

     }

     for (var x = 0; x < array.length; x++) {
       elem[x].addEventListener("click", (function(numbcopy) {
         return function() {
           loadCat(cats, numbcopy);
         };
       })(x));
     }


     var displayPhoto = document.getElementsByClassName('displayArea')[0];
     var image = document.createElement('img');
     var cattile = document.createElement('h3');
     var catcount = document.createElement('p');
     displayPhoto.appendChild(image);
     displayPhoto.appendChild(cattile);
     displayPhoto.appendChild(catcount);


     function loadCat(array, i) {
       image.src = array[i].img;
       image.style.width = '600px';
       image.className = ("catphoto");
       image.id = (array[i].id);
       image.id = ("selected");

       cattile.innerHTML = array[i].name;

       catcount.innerHTML = array[i].count;

       var selected = document.querySelector("#selected");


       selected.addEventListener('click', function() {
         array[i].count = array[i].count + 1;
         catcount.innerHTML = array[i].count;
       });
     }
   }
   catList(cats);

            body {

              margin-right: 80px;

              margin-left: 80px;

            }

            .col-1 {

              width: 25%;

              float: left;

            }

            .col-2 {

              width: 75%;

              float: right;

            }

            .col-2 img {

              margin-top: 20px;

            }

<body>
  <div class="ListArea col-1">
    <h1> Click on the cat</h1>
  </div>
  <div class="displayArea col-2">
  </div>
</body>

Answer 1

您多次添加监听器。您必须在 loadCat 函数中添加一次监听器：

image.addEventListener('click', function() {
  var i = this.getAttribute('data-id');
  array[i].count = array[i].count + 1;
  catcount.innerHTML = array[i].count;
});

我添加了属性 data-id 来定义点击了哪只猫。

而且对象中的 id 只猫必须从 0

开始

DEMO

addEventListener 无法正常工作

addEventListener not working properly

javascript

closures

addeventlistener