Einfache Zählung Funktion funktioniert nicht

Question

Ich dachte, eine einfache Funktion, wo, wenn Sie auf eine Schaltfläche klicken, wird eine Nummer innerhalb eines Absatzes angezeigt. Und wenn Sie weiterhin auf die Schaltfläche klicken, wird die Zahl innerhalb des Absatz-Tags erhöht. Ich bekomme jedoch eine Fehlermeldung, dass getElementsByTagName keine Funktion ist. Here ist der Code auf jsfiddle, ich weiß, dass es etwas einfaches ist, dass ich falsch mache, aber ich weiß nicht, was es ist.

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

Sie überschreiben a Variable mit Ereignisobjekt in Event-Handler übergeben. Ändern Sie den Namen zu e vielleicht, oder entfernen Sie sie ganz wie Sie es nicht ohnehin verwenden:

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

Ein weiteres Problem, das Sie haben wollen klassische closure-in-loop Problem. statt für Schleife Eine der Lösungen wäre Array.prototype.forEach zu verwenden:

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

vars in Javascript sind Funktion scoped, so müssen Sie Ihre Event-Listener wickeln in einer closure function Bindung die Variable, um sicherzustellen, du bist zu aktualisieren ist richtig eingestellt.

(Hinweis: I a-div in der äußeren Funktion und entfernt, um die arg von der inneren Klick-Funktion umbenannt haben).

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); 
}