I'm struggling to activate the eventListener on several elements with the same className or ID. Unfortunately, only the initial child is being triggered in my current code implementation

Question

I'm struggling to activate the eventListener on several elements with the same className or ID. Unfortunately, only the initial child is being triggered in my current code implementation

Hello fellow developers, I'm facing an issue while working on a project. I have about ten menu items with the same ID, and I want to be able to edit each one when it is clicked. Here's what I tried using JavaScript:

    
    const menuElement = document.querySelector('#menuElement')
    const darktheme = document.querySelector('.dark')

    loadEventListener()
    
    function loadEventListener() {
        menuElement.addEventListener('click', draw)
    }

    function draw() {
        menuElement.style.background = 'var(--primary-color)'
    }

However, only the first menu element responds when clicked, but not the rest of them.

Any help would be greatly appreciated. Thank you!

javascript html css addeventlistener

Answer 1

Answer №1

Indeed. Rather than adding multiple event listeners to each element individually, consider utilizing "Event Delegation". By attaching a single event listener to a common ancestor element and allowing the event to bubble up to that ancestor, you can streamline your code. Within the event callback function, you can then determine if the event originated from a specific element that requires handling, and proceed accordingly.

It's important to remember that while ids must be unique, multiple elements can share the same class, making it a practical choice for this purpose.

Here is an EXAMPLE:

// Set up an event handler on a common ancestor
document.addEventListener("click", function(event){
  // Check to see if the event originated at an element with the "foo" class
  if(event.target.classList.contains("foo")){
    // Handle the event any way you want
    event.target.classList.add("bold");
  }
});

.bold { font-weight:bold; }

<p>Click on any of the lines. Only the ones with the "foo" class will get bolded.</p>
<div class="foo">XYZ</div>
<div class="fooBar">XYZ</div>
<div class="foo">XYZ</div>
<div class="fooBar">XYZ</div>
<div class="foo">XYZ</div>
<div class="fooBar">XYZ</div>

Answer 2

Indeed. Rather than adding multiple event listeners to each element individually, consider utilizing "Event Delegation". By attaching a single event listener to a common ancestor element and allowing the event to bubble up to that ancestor, you can streamline your code. Within the event callback function, you can then determine if the event originated from a specific element that requires handling, and proceed accordingly.

It's important to remember that while ids must be unique, multiple elements can share the same class, making it a practical choice for this purpose.

Here is an EXAMPLE:

// Set up an event handler on a common ancestor
document.addEventListener("click", function(event){
  // Check to see if the event originated at an element with the "foo" class
  if(event.target.classList.contains("foo")){
    // Handle the event any way you want
    event.target.classList.add("bold");
  }
});

.bold { font-weight:bold; }

<p>Click on any of the lines. Only the ones with the "foo" class will get bolded.</p>
<div class="foo">XYZ</div>
<div class="fooBar">XYZ</div>
<div class="foo">XYZ</div>
<div class="fooBar">XYZ</div>
<div class="foo">XYZ</div>
<div class="fooBar">XYZ</div>

Answer 3

Answer №2

To select all elements in the document that match a CSS selector, you can utilize the querySelectorAll() method. Once you have obtained a NodeList of these elements, you can then use the forEach() method to add event listeners to each element individually.

Here is a simple example to demonstrate this:

window.addEventListener("DOMContentLoaded", e => {
  document.querySelectorAll(".myclass").forEach((element, i) => {
    element.addEventListener("click", () => console.log(`Div ${i} was clicked.`))
  });
})

.myclass {
  border: 1px solid black;
  padding: 10px;
  margin: 5px;
}

<div class="myclass">Div 0</div>
<div class="myclass">Div 1</div>
<div class="myclass">Div 2</div>

It's important to wait for the DOM to be fully loaded before attaching event handlers using the DOMContentLoaded event.

Remember, IDs must be unique so do not use an ID for this purpose!

Another approach to achieve this functionality is by utilizing event delegation, as explained in Scott Marcus's solution.

Answer 4

To select all elements in the document that match a CSS selector, you can utilize the querySelectorAll() method. Once you have obtained a NodeList of these elements, you can then use the forEach() method to add event listeners to each element individually.

Here is a simple example to demonstrate this:

window.addEventListener("DOMContentLoaded", e => {
  document.querySelectorAll(".myclass").forEach((element, i) => {
    element.addEventListener("click", () => console.log(`Div ${i} was clicked.`))
  });
})

.myclass {
  border: 1px solid black;
  padding: 10px;
  margin: 5px;
}

<div class="myclass">Div 0</div>
<div class="myclass">Div 1</div>
<div class="myclass">Div 2</div>

It's important to wait for the DOM to be fully loaded before attaching event handlers using the DOMContentLoaded event.

Remember, IDs must be unique so do not use an ID for this purpose!

Another approach to achieve this functionality is by utilizing event delegation, as explained in Scott Marcus's solution.

I'm struggling to activate the eventListener on several elements with the same className or ID. Unfortunately, only the initial child is being triggered in my current code implementation

Answer №1

Answer №2

Similar questions

Iterating through elements within a Div will retrieve the initial element exclusively

An issue has been discovered with the Search function as JavaScript's Array.filter() and .map() methods are not functioning properly, resulting in

Angular login/signup modal/dialog component for seamless user authentication

Having trouble getting my list items to display on individual lines within the foreach loop. It just doesn't seem to be working as expected

Guide to designing a CSS gradient with a downward arrow linked to a specific container

The function for utilizing useState with a callback is throwing an error stating "Type does not have

Node.js - Creating seamless integration between Sequelize model JS and controller TS

Problems with the main title formatting in the header

Iterate over a JSON document, insert an item, and then store the updated data in a separate

Enhancing OpenSeadragon images with custom overlays and managing error messages

Unable to get the onchange event to trigger for a span element

Instructions on creating a "ripple" effect on a webpage using CSS

Verify the presence of a ::after pseudo-element on a scraped webpage

Step-by-step guide on setting up a click counter that securely stores data in a text file, even after the

Is it possible to include jQuery's selectors contain and closest within my CSS selector?

Problems with implementing JavaScript code in a WebView

What are the ways to convert canvas animations into gif or webm formats?

issue with border color staying the same when focusing

Organize the array following the guidelines of a card game with a versatile approach

Cannot access mobile navigation due to expanded browser search bar