JavaScript Click Event Listener on Multiple Elements and Get Target Id

Javascript click event listener on multiple elements and get target ID

You are not passing an article object to redirect as a parameter.

Try this (EDIT):

articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect,false);
}
function redirect(ev){
    alert(ev.target.id);
}

Hope, it will solve the bug.

Apply eventlistener to multiple elements based on their IDs

You can use document.querySelector to get a list of elements from a list of IDs:

function toggleFn() {
  const pan = document.getElementById("main-panel");
  if(pan.style.display === "inline-block") {
    pan.style.display = "none";
  } else {
    pan.style.display = "inline-block";
  }
}
document.querySelector("#Id1, #Id2")
  .forEach(elem => elem.addEventListener(toggleFn);

create onclick event for multiple ids

If you want to have one function that will have a click listener on several elements (for example by class) you can try it like this:

<button class="button" id="id1">A</button>
<button class="button" id="id2">B</button>
<button class="button" id="id3">C</button>

<script>
    $(document).on('click', '.button', function () {
        $.ajax({
            type: "POST",
            url: "/url",
            data: {
                uInput: this.getAttribute('id'),
            },
            success: function (response) {
                console.log(response);
            },
            error: function (error) {
                console.log(error);
            }
        });
    });
</script>

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

Attaching a click event to multiple elements at once?

You could use querySelectorAll with your multiple element selectors, then add the event listeners to each one

var elements = document.querySelectorAll(".a, .b");
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click", function() {
    console.log("clicked");
  });
}

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>

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

---

Related Topics