Invoke the onclick method using addEventListener

Question

Invoke the onclick method using addEventListener

I am attempting to create a basic function that increments a counter when one of my list items is clicked on. However, I keep encountering an error message that says addEventListener is not a function.

This is how the HTML looks:

  <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>

The JavaScript portion is as follows:

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

Does anyone have any suggestions on how to fix this issue?

javascript oop

Answer 1

Answer №1

    function CounterFunction(group){
      this.count = 0;
    
      this.addClickEvent = function() {
        this.count++;
        console.log(this.count);
      };
    
      // Revised code:
      //el.addEventListener('click', this.addClick(), false);
      // Explanation of changes needed for the addEventListener method
      for (var i = 0; i < group.length; i++) {
        group[i].addEventListener('click', this.addClickEvent.bind(this), false);
      }
    }
    
    var elements = document.getElementsByClassName('box');
    var instance = new CounterFunction(elements);

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

    function CounterFunction(group){
      this.count = 0;
    
      this.addClickEvent = function() {
        this.count++;
        console.log(this.count);
      };
    
      // Revised code:
      //el.addEventListener('click', this.addClick(), false);
      // Explanation of changes needed for the addEventListener method
      for (var i = 0; i < group.length; i++) {
        group[i].addEventListener('click', this.addClickEvent.bind(this), false);
      }
    }
    
    var elements = document.getElementsByClassName('box');
    var instance = new CounterFunction(elements);

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 3

Answer №2

The function getElementsByClassName

provides an array-like collection of elements instead of a single element.

Updated syntax:

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

Loop through each class element:

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

Answer 4

The function getElementsByClassName

provides an array-like collection of elements instead of a single element.

Updated syntax:

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

Loop through each class element:

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

Answer 5

Answer №3

An issue arises when attempting to add an event listener to a group of elements. The correct approach is to iterate through them and attach the listener individually:

function MyCounter(links) {
    var turn = 0;

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

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

By following this method, a single function serves as a global counter.

Answer 6

An issue arises when attempting to add an event listener to a group of elements. The correct approach is to iterate through them and attach the listener individually:

function MyCounter(links) {
    var turn = 0;

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

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

By following this method, a single function serves as a global counter.

Answer 7

Answer №4

function CounterBoxes(squares){
    this.count = 0;

    this.incrementCount = function() {
        this.count ++;
        console.log(this.count);
    };

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

var squares = document.getElementsByClassName('box');
var boxCounter = new CounterBoxes(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 8

function CounterBoxes(squares){
    this.count = 0;

    this.incrementCount = function() {
        this.count ++;
        console.log(this.count);
    };

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

var squares = document.getElementsByClassName('box');
var boxCounter = new CounterBoxes(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 9

Answer №5

If the boxes are filling the size of the ul element, you can use this method instead of creating multiple listeners.

<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>

Answer 10

If the boxes are filling the size of the ul element, you can use this method instead of creating multiple listeners.

<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>

Invoke the onclick method using addEventListener

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How to target a form in jQuery without using a class selector

JQGrid is a unique event grid that triggers only once for the inaugural loading, allowing users to apply a default filter upon first loading

The authorization process for uploading data to Azure Data Lake Gen2

What is the proper way to provide parameters in a GET request using Axios?

Is there a way for the React select component to adjust its width automatically based on the label size?

Using Bootstrap Multiselect and making AJAX GET requests with nested objects

Should I use the item-text property or another property in v-autocomplete for Vuetify search?

RxJS and asynchronous operations - Mastering the flow of execution

Expanding the ul height with animation when the page loads

Interfacing Contact Form Data from Vue Application to Magento Using API - A Step-by-Step Guide

Ways to merge several getServerSideProps functions

"Learn the process of setting a variable in ng-model within an input field based on a specific condition

Develop a segmented control-style component with a draggable feature

Encase the event handler within JQuery

Issues with background image slideshow functionality

Utilize ThreeJS to incorporate a positional offset into a Matrix4 as part of a series of

what is preventing me from receiving the props effectively

WebPack Error: When calling __webpack_modules__[moduleId], a TypeError occurs, indicating that it is not a function during development. In production, an Invalid hook call error

Utilizing Several Pop-up Windows on a Single Page

Transform a bit of JavaScript to jQuery