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循环中缺少用于定位正确元素的计数器

在页面上更新整数

1 个答案: