Javascript 如何在不同的计数器中控制一个变量

我设计了一个计数器，每个计数器有3个按钮（向上、向下和移除计数器）。我可以添加计数器。每个新计数器都工作得很好，但其他计数器继续从新计数器计数。我想我应该创建一个数字数组n，对于n（I），我们应该有count（I）？如果这是真的，那我怎么做呢

我怎样才能解决这个问题

    var up = document.getElementsByClassName("up");
    var n = 0;
    for (i = 0; i < up.length; i++) {
        up[i].addEventListener("click", function (){
            var input = this.parentElement.getElementsByClassName("input");
                    n++;
                    input[0].innerHTML = parseInt( input[0].innerHTML ) + 1;
        });
    };


    <button class="up">up</button>
    <div class="input">0</div>

var up=document.getElementsByClassName（“up”）；
var n=0；
对于（i=0；i

每次运行

upDownCounter（）

因此，页面上的第一个计数器每次都会获得click listener—如果在事件侦听器中添加

console.log（）

，则会看到它对较旧的计数器运行多次

up[i].addEventListener("click", function (){
    console.log('up click'
    ...
});

如果您有3个计数器，那么单击第一个计数器上的“up”将记录“up click”3次，第二个计数器将记录两次，最新的计数器将记录1次，因为它只添加了一次事件侦听器

另外，我认为您的var作用域已关闭，您的

n

变量对于所有计数器都是公共的，需要在click处理程序中声明。 您可以使用此选项：

input[0].innerHTML = parseInt( input[0].innerHTML ) + 1;

尽管代码可以进行一些重构，但它会重复很多次，而且有点难以遵循。

这可以理解为“为我做我的工作”之类的请求。请问一个具体的问题，你正在为哪一部分而挣扎，并将你发布的代码减少为一个（额外强调最小值）。