Question

我有一个将图像及其名称存储在数组中的程序。名称显示在列表中，单击时显示相应的图像我还想计算一旦显示图像后的点击次数。在每个图像的稍后时刻，我现在只是想计算总点击次数。

下面的代码没有显示控制台中的点击，我没有收到任何错误。是不是可以嵌套这样的两个立即调用的函数？

for (var i = 0; i < cats.length; i++) {

 //Building the list . Creating a list item and  textnode. The textnode  reads out the catnames. Append the textnode to the list. Append all of it to the catlist in the HTML
    var catitem = document.createElement("LI");
    var textnode = document.createTextNode(cats[i].id);
    catitem.appendChild(textnode);
    document.getElementById("catlist").appendChild(catitem);

    //Adding the catname to the div
    var currentcat = cats[i].id;
    var currentimage = cats[i].img;

    catitem.addEventListener('click', (function(currentimage_copy) {

        return function() {
            var clicks = 0;

            var x = document.createElement("IMG");
            x.setAttribute("src", currentimage_copy);
            var item = document.getElementById("catimage");
            var y = document.getElementById("catimage").childNodes[0];
            item.replaceChild(x, y);

            x.setAttribute("onclick", (function countClicks(clickscopy) {
                return function countClicks() {
                    clicks++;
                    console.log(clickscopy);
                };
            })(clicks));

这是完整的代码

<!DOCTYPE html>
<html>

<body>
<title>||Cats||</title>
</head>

<body>

 <h1>This is the list of cats<h1>
 <h2>Click the cat to see an image of the cat</h2>
 <ul id="catlist">
 </ul>

<div id="catimage">
</div>

 <div id="catname"></div>

 <div id="current"></div>
<script>
document.body.onload = addElement;

function addElement() {


var cats = [{
        img: "cat.jpg",
        id: "cleo"
    },

    {
        img: "shimi.png",
        id: "shimi"
    },

    {
        img: "miezi.png",
        id: "miezi"

    },
    {
        img: "tom.jpg",
        id: "tom"
    },

    {
        img: "chrissie.jpg",
        id: "chrissie"
    }
];




for (var i = 0; i < cats.length; i++) {

    //Building the list . Creating a list item and  textnode. The textnode      reads out the catnames. Append the textnode to the list. Append all of it to the catlist in the HTML
    var catitem = document.createElement("LI");
    var textnode = document.createTextNode(cats[i].id);
    catitem.appendChild(textnode);
    document.getElementById("catlist").appendChild(catitem);

    //Adding the catname to the div
    var currentcat = cats[i].id;
    var currentimage = cats[i].img;

    catitem.addEventListener('click', (function(currentimage_copy) {

        return function() {
            var clicks = 0;

            var x = document.createElement("IMG");
            x.setAttribute("src", currentimage_copy);
            var item = document.getElementById("catimage");
            var y = document.getElementById("catimage").childNodes[0];

            item.replaceChild(x, y);

            x.setAttribute("onclick", (function countClicks(clickscopy) {
                return function countClicks() {
                    clicks++;
                    console.log(clickscopy);
                };
            })(clicks));


        };

    })(currentimage));


}
}
</script>

</body>
</html>

Answer 1

使用addEventListener代替setAttribute

试试这个：

＆＃13;

var cats = [{
  id: 1,
  img: 'https://jsfiddle.net/img/logo.png'
}, {
  id: 2,
  img: 'https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
}, ]
for (var i = 0; i < cats.length; i++) {

  //Building the list . Creating a list item and  textnode. The textnode  reads out the catnames. Append the textnode to the list. Append all of it to the catlist in the HTML
  var catitem = document.createElement("LI");
  var textnode = document.createTextNode(cats[i].id);
  catitem.appendChild(textnode);
  document.getElementById("catlist").appendChild(catitem);

  //Adding the catname to the div
  var currentcat = cats[i].id;
  var currentimage = cats[i].img;

  catitem.addEventListener('click', (function(currentimage_copy) {
    return function() {
      var clicks = 0;
      var x = document.createElement("IMG");
      x.setAttribute("src", currentimage_copy);
      var item = document.getElementById("catimage");
      var y = document.getElementById("catimage").childNodes[0];
      item.replaceChild(x, y);

      x.addEventListener("click", (function countClicks(clickscopy) {
        return function countClicks() {
          clickscopy++;
          console.log(clickscopy);
        };
      })(clicks));
    }
  })(currentimage))
}

＆＃13;

<ul id='catlist'></ul>

<div id='catimage'>
  <img src="" alt="">
</div>

＆＃13;

嵌套立即调用函数Javascript

1 个答案: