javascript - 更新页面上的整数

Question

我正在创建一个显示猫列表的东西，然后在单击图像时增加一个计数器。我已经让一切正常，所以当我将图像记录到控制台时，单击图像时它会增加整数。唯一的问题是页面上的计数器不会递增，而是保持为零。

这是我的代码。我尝试创建一个更新函数，该函数使用类标记获取所有内容，然后循环遍历它，用相同的内容替换 HTML，以便重绘文本。

但是它不起作用。任何帮助将不胜感激!

var HTMLcatName = '<h1>%data%</h1>';
var HTMLcatImage = '<img id="cat" src="%data%">';
var HTMLcatCounter = '<p class="counter">Number of clicks: %data%</p>';
var noCats = 'No cats selected m8';

var cats = {

    "name": ["Monte", "Jib"],
    "image": ["images/monte.jpg", "images/jib.jpg"],
    "clicks": [0, 0],

    display: function () {

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

            formattedCatNames = HTMLcatName.replace("%data%", cats.name[i]);
            var catNames = formattedCatNames;

            formattedCatImages = HTMLcatImage.replace("%data%", cats.image[i]);
            var catImages = formattedCatImages;

            formattedCatCounter = HTMLcatCounter.replace("%data%", cats.clicks[i]);
            var catCounter = formattedCatCounter

            var elem = document.createElement('div');
            elem.innerHTML = catNames + catImages + catCounter;

            elem.querySelector('img').addEventListener('click', (function(catCountUp) {
                return function() {
                    cats.clicks[catCountUp]++;
                    update();
            };
        })(i));
            document.body.appendChild(elem);
        }
    },
}

cats.display();

var getCounterClass = document.getElementsByClassName("counter");

var update = function() {

    for (j = 0; j < getCounterClass.length; j++) {
        getCounterClass[j].innerHTML = '<p class="counter">Number of clicks: ' + cats.clicks[j] + '</p>';
    }
}

Answer 1

我看不到点击事件，但这可能是错误:

 getTags.innerHTML = '<p class="counter">Number of clicks: ' + cats.clicks[j] + '</p>';

替换为

getTags[j].innerHTML = 'Number of clicks: ' + cats.clicks[j];

您在 for 循环中缺少用于定位正确元素的计数器