javascript - 在页面上更新整数

我正在创建显示猫列表的内容，然后在单击图像时增加一个计数器。我已经完成所有工作，因此当单击图像时，当我将其记录到控制台时，它会增加整数。唯一的问题是在页面上计数器不会增加，而是保持为零静态。

这是我的代码。我试图创建一个更新函数，该函数将所有带有class标记的东西带走，然后循环遍历它，用相同的东西替换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>';
    }
}

最佳答案

我看不到click事件，但这可能是错误：

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

用。。。来代替

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

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