Aufruf Methode onclick mit addEventListener

Question

Ich versuche eine einfache Funktion zu machen, die einen Zähler erhöht, wenn ein Klick auf einer meiner Lis auftritt. Wenn ich das ausführe, erhalte ich einen Fehler addEventListener ist keine Funktion.

HTML:

<ul class="boxes"> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    </ul> 

JS:

 var squares = document.getElementsByClassName('box'); 

    function MyCounter(el){ 
      this.turn = 0; 

       this.addClick = function() { 
       this.turn ++; 
       console.log(this.turn); 
      }; 

       el.addEventListener('click', this.addClick(), false); 
     } 
    var c = new MyCounter(squares); 

Irgendwelche Vorschläge?

Answer 1

function MyCounter(els){ 
 
     this.turn = 0; 
 
    
 
     this.addClick = function() { 
 
     this.turn++; 
 
     console.log(this.turn); 
 
     }; 
 
    
 
     // old code: 
 
     //el.addEventListener('click', this.addClick(), false); 
 
     // 1. parameter el is a collection of DOM elements, not a single element 
 
     // 2. this.addClick() - calls addClick, resulting in undefined to be passed to addEventListener 
 
     // 3. context inside addClick (if its reference is passed to addEventListener) would be DOM element, not instance of MyCounter 
 
     for (var i = 0; i < els.length; i++) { 
 
     els[i].addEventListener('click', this.addClick.bind(this), false); 
 
     } 
 
    } 
 
    
 
    var squares = document.getElementsByClassName('box'); 
 
    var c = new MyCounter(squares);

div.box 
 
{ 
 
    display:block; 
 
    width:100px; 
 
    height:100px; 
 
    margin-right:10px; 
 
    margin-bottom:10px; 
 
    background: green; 
 
}

<div class="box">A</div> 
 
<div class="box">B</div>

Answer 2

getElementsByClassName gibt ein array-ähnliches Element zurück, kein einzelnes Element.

Es sollte sein:

var squares = document.getElementsByClassName('box')[index];

Für jede Klasse Element Schleife:

document.querySelectorAll('.box').forEach((e) => { 
    ... 
    e.addEventListener(...) 
}); 

Answer 3

Das Problem ist, dass Sie versuchen, ein Ereignis-Listener auf eine Liste von Elementen hinzuzufügen. Stattdessen müssen Sie obwohl sie in einer Schleife und wenden Sie den Hörer auf jedem einzelnen:

function MyCounter(links) { 
    var turn = 0; 

    function addClick = function() { 
     turn ++; 
     console.log(turn); 
    }; 

    for (var i=0; i<links.length; i++) { 
     links[i].addEventListener('click', addClick(), false); 
    } 
} 

diese Weise können Sie eine Funktion, die als globale Zähler wirkt.

Answer 4

function MyCounter(squares){ 
 
    this.turn = 0; 
 

 
    this.addClick = function() { 
 
     this.turn ++; 
 
     console.log(this.turn); 
 
    }; 
 

 
    var that = this; 
 
    for(var i = 0; i < squares.length; i++){ 
 
     squares[i].addEventListener('click', function(){ 
 
    \t  that.addClick(); 
 
     }, false); 
 
    } 
 
} 
 

 
var squares = document.getElementsByClassName('box'); 
 
var c = new MyCounter(squares);

<ul class="boxes"> 
 
    <li class="box">box</li> 
 
    <li class="box">box</li> 
 
    <li class="box">box</li> 
 
    <li class="box">box</li> 
 
    <li class="box">box</li> 
 
    <li class="box">box</li> 
 
    <li class="box">box</li> 
 
    <li class="box">box</li> 
 
    <li class="box">box</li> 
 
</ul>

Answer 5

Sie können jederzeit diese Methode verwenden, wenn die Kästen, die Größe des ul-Element füllen (anstatt mehrere Zuhörer zu schaffen)

<ul id="boxes" class="boxes"> 
     <li class="box"></li> 
     <li class="box"></li> 
     <li class="box"></li> 
     <li class="box"></li> 
     <li class="box"></li> 
     <li class="box"></li> 
     <li class="box"></li> 
     <li class="box"></li> 
     <li class="box"></li> 
     </ul> 

    <script> 


var squares = document.getElementById("boxes"); 
squares.addEventListener('click', function (el) { 
    if ("HTMLLIElement" === el.target.constructor.name) { 
     //counter++ 
    } 
}, true); 
    </script>