Want to Add "Addeventlistener" on Multiple Elements With Same Class

add event listener to multiple divs with same class in a container

Look at your logic.

Select an element
Find all the .grid-item elements
Define a function that creates grid-item
Call the function that creates grid-item

So with that logic, you are clearly not going to find any elements. You need to create the grid-item elements before you select them. You also are not adding the class to the element correctly

So changing the order:

function myFunc() {
  console.log("hello", this);
}

const container = document.querySelector(".container");
makeGrid(16, 16);
const gridItem = document.querySelectorAll(".grid-item").forEach(gridItem => gridItem.addEventListener("click", myFunc));


function makeGrid(rows, cols) {
  container.style.setProperty("--grid-rows", rows);
  container.style.setProperty("--grid-cols", cols);

  for (let i = 0; i < (rows * cols); i++) {
    const gridItem = document.createElement("div");
    gridItem.classList.add("grid-item");
    gridItem.textContent = i + 1;
    container.appendChild(gridItem)
  }
}

.container {
  --grid-cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: .1em;
}

.grid-item {
  border: 1px solid #CCC;
  padding: .2em;
  text-align: center;
}

<div class="container"></div>

Event listener on multiple elements with the same class

Is it possible that JavaScript detects only one (first in HTML code) .close div?

Yes, document.querySelector returns the first matching element it finds in the DOM. If you want to add your listeners to every .close on the page, either loop through the NodeList returned by document.querySelectorAll:

const closeList = document.querySelectorAll('.close');
closeList.forEach(element => {
  element.addEventListener('click', () => closeSlide('about'));
  element.addEventListener('click', () => closeSlide('work'));
  element.addEventListener('click', () => closeSlide('contact'));
};

or add a listener to an element containing all of your .close elements that only takes action if a .close was clicked:

document.querySelector('#some-container').addEventListener('click', evt => {
  if (!evt.target.closest('.close')) return;
  closeSlide('about');
  closeSlide('work');
  closeSlide('contact');
});

How to apply an eventListener to multiple elements with the same class and have each element respond independently

In the first version you are executing the pickSelection function instead of passing its reference, the addEventListener expects a function reference as a callback when the particular event is triggered.

But since you passed return value of the pickSelection function which is undefined (as you are not returning anything from the pickSelection so by default it is returning undefined) it is not working.

In the second version you are actually passing the function reference to the addEventListner, which being a arrow function syntax.

This following would also work, by simply passing the reference pickSelection, but this time it will receive the event object.

const selection = document.querySelectorAll(".zone");selection.forEach(element => {   element.addEventListener('click', pickSelection)})function pickSelection(event) {      //getting the event object from the callback, target refers to the current element clicked.    console.log(event.target.textContent)}

<div class='container'>    <div class="zone green">lt;/div>    <div class="zone red">lt;/div>    <div class="zone blue">lt;/div>    <div class="zone yellow">lt;/div>    <div class="zone purple">lt;/div>    <div class="zone brown">lt;/div>    <div class="zone green">lt;/div>    <div class="zone red">lt;/div>    <div class="zone blue">lt;/div>    <div class="zone yellow">lt;/div>    <div class="zone purple">lt;/div>    <div class="zone brown">lt;/div></div>

react how to add event listeners to multiple elements at once

React is perfect for this, because it allows you to reuse components! You could make a component that contains your click handler, then reuse it throughout your application.

const MyReusableButton = () => {
  const myClickHandler = () => {
    console.log("Clicked!");
  }
  return <button onClick = {myClickHandler}>Click Me</button>;
}

const App = () => {
  // now I can reuse my button component as many times as I want!
  return (
    <div>
      <MyReusableButton />
      <MyReusableButton />
      <MyReusableButton />
      <MyReusableButton />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

How to addEventListener to multiple elements in a single line

Well, if you have an array with the elements you could do:

let elementsArray = document.querySelectorAll("whatever");

elementsArray.forEach(function(elem) {
    elem.addEventListener("input", function() {
        //this function does stuff
    });
});

addEventListener with multiple elements

The best way is to have as few event listeners as possible in your code. So instead of attaching an event listener to each and every button, you can attach 1 single event listener to the area div and make suitable changes based on event.target attribute.

Run the below working code snippet:

document.getElementById('area').addEventListener('click', function(event) {  func(event.target);});
function func(element) {  element.style.backgroundColor = "blue";}

<div id="area">  <button type="button" class="btn" id="btn1">Play With Me!</button>  <button type="button" class="btn" id="btn2">Play With Me!</button></div>