CODEWITHSUNDEEP
javascriptdom
Jamisco
Jamisco

Reputation: 1862

How to addEventListener to multiple elements in a single line

Example 1:

element1.addEventListener("input", function() {
  // this function does stuff 
});

Example 2:

element1 && element2.addEventListener("input", function() {
  // this function does stuff
});

It might not be correct grammatically, but is there a way I can give two elements the same event listener at the same time (same line) instead of having to write them apart?

Upvotes: 124

Views: 182600

Answers (15)

GMaiolo
GMaiolo

Reputation: 4628

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

Upvotes: 191

abrham t
abrham t

Reputation: 11

You can add an event listener to multiple elements using the path key of the click event object.

document.addEventListener('click', function(e){
  //e.path[0].id;
  //e.path[0].tagName;
  //e.path[0].className;
  if(e.path[0].className==="my-element"){
    console.log("clicked");
  }
})

Upvotes: 1

mplungjan
mplungjan

Reputation: 177860

I always recommend delegation - if the inputs are in the same container, then you can do this

window.addEventListener("DOMContentLoaded", function() { // on page load
  document.getElementById("inputContainer").addEventListener("input", function(e) { // passing the event
    const tgt = e.target;
    const id = tgt.id;
    console.log("You typed in",id)
  });
});
<div id="inputContainer">
  <h1>Start typing or paste</h1>
  <input id="element1">
  <input id="element2">
</div>

Upvotes: 5

Jenil J
Jenil J

Reputation: 3

First include jQuery then after you have included, add this script below.

Html code:

<script>
    $('.greadingButton').on('click', function () {
        $('.greadingButton').removeClass('selected');
        $(this).addClass('selected');
    });
</script>

Upvotes: -3

Abdul Rehman
Abdul Rehman

Reputation: 307

Maybe it will help you

let all_btn = document.querySelectorAll("button");
all_btn.forEach(function(btn) {
    btn.addEventListener("click", function() {
        console.log(this.innerHTML + " is clicked")
    });
});

// one line code
// let all_btn=document.querySelectorAll("button");all_btn.forEach(function(n){n.addEventListener("click",function(){console.log(this.innerHTML+" is clicked")})});
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>

Upvotes: 3

raddevus
raddevus

Reputation: 9077

Here's what I used to set a click evenhandler on every span in my HTML (each span contains an emoji). When you click it, it will alert the emoji in the sample code.

Array.from(document.querySelectorAll("span")).map(element => element.addEventListener("click", function() {
  alert(element.innerHTML);
}));
div{background: whitesmoke;}
span{ont-size:x-large;
    cursor:pointer;}
<div>
  <span>&#128512;</span>
  <span>&#128513;</span>
  <span>&#128514;</span>
  <span>&#128515;</span>
  <span>&#128516;</span>
  <span>&#128517;</span>
  <span>&#128518;</span>
  <span>&#128519;</span>
  <span>&#128520;</span>
  <span>&#128521;</span>
  <span>&#128522;</span>
  <span>&#128523;</span>
</div>

Upvotes: 0

alex-chama
alex-chama

Reputation: 59

If you have a DOM Collection, I suggest you to use the for ... of

In this MDN web doc you can see the details, but, for example, if you have:

HTMLCollection(6) [a.example, a.example, a.example, a.example, a.example, a.example]

You can:

let arrayElements = document.getElementsByClassName('example');
for (let element of arrayElements) {
    element.addEventListener("click", function() {
        console.log('Whoa! You clicked me')
    });

And ta-dah! ;)

Upvotes: 0

Adrian
Adrian

Reputation: 2388

One line

document.querySelectorAll("whatever").forEach(elem => elem.addEventListener("input", fn))

Upvotes: 16

MrAnyx
MrAnyx

Reputation: 256

If you are using Javascript through Electron and you have a list of buttons, you can use this code to add an EventListener to each button. I'm actually using this method because classical Javascript methods (map(), forEach() ...) weren't supported anymore.

let buttons = document.getElementsByClassName('className');
for(let i = 0; i<buttons.length; i++){
   buttons[i].addEventListener('click', () => {
      /*put your code here*/
   });
}

Upvotes: 2

Noman Gul
Noman Gul

Reputation: 397

Example:

const element1 = document.querySelector("#element1");
const element2 = document.querySelector("#element2");

[element1, element2].map(element => element.addEventListener("click", function() {
  /*some expressions :)*/
}))

Upvotes: 1

Vincent Tang
Vincent Tang

Reputation: 4170

Example for initializing one unique event listener specific to each element.

You can use the slider to show the values in realtime, or check the console.

On the <input> element I have a attr tag called data-whatever. You can use that to customize each event listener further.

sliders = document.querySelectorAll("input");
sliders.forEach(item=> {
  item.addEventListener('input', (e) => {
    console.log(`${item.getAttribute("data-whatever")} is this value: ${e.target.value}`);
    item.nextElementSibling.textContent = e.target.value;
  });
})
.wrapper {
  display: flex;
}
span {
  padding-right: 30px;
  margin-left: 5px;
}
* {
  font-size: 12px
}
<div class="wrapper">
  <input type="range" min="1" data-whatever="size" max="800" value="50" id="sliderSize">
  <em>50</em>
  <span>Size</span>
  <br>
  <input type="range" min="1" data-whatever="OriginY" max="800" value="50" id="sliderOriginY">
  <em>50</em>
  <span>OriginY</span>
  <br>
  <input type="range" min="1" data-whatever="OriginX" max="800" value="50" id="sliderOriginX">
  <em>50</em>
  <span>OriginX</span>
</div>

Upvotes: 0

Aldrin Espinosa
Aldrin Espinosa

Reputation: 41

The easiest way so far I've learned.

// Get an array of buttons from the page
var buttons = document.querySelectorAll(".btns");

// Loop through the resulting array
for(var i = 0; i < buttons.length; i++){
  buttons[i].addEventListener("click", function() {
    console.log("Hello World");
  });
}

Upvotes: 1

John Ayling
John Ayling

Reputation: 501

If you don't want to have a separate elementsArray variable defined you could just call forEach from an unnamed array with the two elements.

[ Element1, Element2 ].forEach(function(element) {
   element.addEventListener("input", function() {
      this function does stuff
   });
});

Upvotes: 50

daniella
daniella

Reputation: 401

I cannot claim credit for this solution but I found a great solution here.

https://www.kirupa.com/html5/handling_events_for_many_elements.htm

    var theParent = document.querySelector("#theDude");
    theParent.addEventListener("click", doSomething, false);

    function doSomething(e) {
        if (e.target !== e.currentTarget) {
            var clickedItem = e.target.id;
            alert("Hello " + clickedItem);
        }
        e.stopPropagation();
    }

Upvotes: 4

Ayush Sharma
Ayush Sharma

Reputation: 2107

Event Bubbling is the important concept in javascript, so if you can add event on DOM directly, you can save some lines of code, no need for looping :

document.addEventListener('click', function(e){
  if(e.target.tagName=="BUTTON"){
   alert('BUTTON CLICKED');
  }
})

Upvotes: 49

Related Questions