javascript - 我怎样才能使这个点击计数器正常工作？

Question

我正在制作一个 Marvel API 项目。我添加了一个“喜欢”按钮，这样它就可以计算喜欢的次数，但是每次我单击任何“喜欢”按钮时，唯一的计数器添加数字是第一个。谁能告诉我如何正确执行此操作？

问题是因为 ID 是由 for 生成的，所以我该如何解决这个问题？

这是我的 JS 代码(在我项目的 js 文件中):

success: function(data)
{
    footer.innerHTML = data.attributionHTML;
    var string = "";
    string += "<div class='row'>";

    for (var i = 0; i < data.data.results.length; i++)
    {
        var element = data.data.results[i];                   
        string += '<div class="col-md-3" align="center">';                 
        string += "<img src='" + element.thumbnail.path + "/portrait_fantastic." + element.thumbnail.extension + "'/>";                       
        string += '<button class="btn btn-success" onClick="testo()"><i class="fas fa-thumbs-up"></i> | <a id="likes">0</a></button>';
        string += "<h3>" + element.title + "</h3>";                                                  
        string += "</div>";

        if ((i + 1) % 4 == 0) 
        {
            string += "</div>";
            string += "<div class='row'>";
        }
    }

    marvelContainer.innerHTML = string;
}

这是我的 onclick 函数(它在我的 html 文件中，因为它对我的 js 文件不起作用)

<script>
var likes=0;
function testo()
{
    likes += 1;
    document.getElementById("likes").innerHTML = likes;
}
</script>

Answer 1

那是因为您所有的按钮都是使用相同的 id="likes" 生成的，然后您正在使用 document.getElementById("likes").innerHTML = likes 更改 HTML ;为了让您的代码正常工作，您需要使用不同的方法，可能会向您的按钮添加一个 data-* 属性，然后使用 .getAttribute('data-id-something' ).innerHTML 而不是 document.getElementById("likes").innerHTML。或者在这种情况下更好，你可以给按钮一个类名并用以下方法处理它:document.getElementsByClassName("like-btn")

您可以检查此示例中的最后一个选项:

 	var init = function(data){
                var string ="";
                string += "<div class='row'>";
                for(var i = 0; i<4; i++)
                {
                    // var element = data.data.results[i];                   
                    string += '<div class="col-md-3" align="center">';                 
                    string += "<img src='/portrait_fantastic.jgeg'/>";                       
                    string += '<button class="btn btn-success" onClick="testo('+i+')"><i class="fas fa-thumbs-up"></i> | <span class="like-btn">0</span></button>';
                    string += "<h3>Element title</h3>";                                                  
                    string += "</div>";                   
                    if((i+1) % 4 ==0) 
                    {
                        string += "</div>";
                        string += "<div class='row'>";
                    }
                }
                document.getElementById("marvelContainer").innerHTML = string;
            }
            init();

<script>
var likes=0;
function testo(id) {      
        var btn = document.getElementsByClassName("like-btn");
        likes = parseFloat(btn[id].innerHTML);
        likes += 1;
        btn[id].innerHTML = likes;
    }
</script>

<div id="marvelContainer"></div>

希望对你有帮助...