个人中心
gpt4 book ai didi

javascript - addEventListener 无法正常工作

转载 作者：行者123 更新时间：2023-11-29 21:49:41 25 4
gpt4 key购买 nike

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

这些是说明:

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

在猫的展示区，应该展示以下内容
1.猫的名字
2.一张猫的照片
3.显示点击次数的文字
4.布局的具体细节并不重要，所以可以根据自己的喜好设计样式。

互动
1.当点击列表中的猫名时，猫显示区域应该更新以显示所选猫的数据。
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>

最佳答案

您多次添加监听器。您必须在 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

关于javascript - addEventListener 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29904628/

25 4 0
文章推荐： javascript - 断开连接后 socket.io 没有重新连接
文章推荐： android - 无论如何要在android中完全禁用webview
文章推荐： android - 什么时候使用哪种方式访问​​UI线程？
文章推荐： javascript - 如何将 Dart 转换为 JavaScript？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com