Question

我想做一个简单的功能，如果你点击一个按钮，一个数字会出现在一个段落里面。如果您继续单击按钮，段落标记内的数字将会增加。但是，我收到一条错误消息，指出 getElementsByTagName 不是一个函数。 Here是jsfiddle上的代码，我知道有一些简单的问题，我做错了，但我不知道它是什么。

HTML

<div class="resist" id="ex1"><h2>Sleep</h2><p></p><button>Resist</button></div>

<div  class="resist" id="ex2"><h2>Eat</h2><p></p><button>Resist</button></div>

的Javascript

var count = 0;
var resist = document.getElementsByClassName('resist') ;
for(var i = 0; i < resist.length; i++)
{    var a = resist[i];

    a.querySelector('button').addEventListener('click', function(a){
       count +=1;
        a.getElementsByTagName('p')[0].innerHTML = count;
    });
}

Answer 1

您正在使用传递给事件处理程序的事件对象覆盖a变量。可能会将名称更改为e，或者完全删除它，因为您还没有使用它：

a.querySelector('button').addEventListener('click', function(e /* <--- this guy */) {
  count += 1;
  a.getElementsByTagName('p')[0].innerHTML = count;      
});

您将遇到的另一个问题是经典closure-in-loop问题。其中一个解决方案是使用Array.prototype.forEach而不是for循环：

var count = 0;
var resist = Array.prototype.slice.call(document.getElementsByClassName('resist'));
// ES6: var resist = Array.from(document.getElementsByClassName('resist'));

resist.forEach(function(a) {
  a.querySelector('button').addEventListener('click', function(e) {
    count += 1;
    a.getElementsByTagName('p')[0].innerHTML = count;
  });
});

Answer 2

Javascript中的

vars是函数范围的，因此您必须将事件侦听器绑定包装在closure function中，以确保您尝试更新的变量已正确设置。

（注意：我已在外部函数中将a重命名为div，并从内部点击功能中删除了arg。

var count = 0;
var resist = document.getElementsByClassName('resist') ;
var div;
for(var i = 0; i < resist.length; i++)
{   
    div = resist[i];
    (function(div){
        div.querySelector('button').addEventListener('click', function(){
            count +=1;
            div.getElementsByTagName('p')[0].innerHTML = count;
        });
    })(div);
}

简单计数功能不起作用

2 个答案: