Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Access buttons of a div as an array

This is a problem I was having:

I am trying to access the button inside of the div and make each of them log its own text content on click. But all of them display all of the text content. And it has to be in vanilla JavaScript.

const array = document.querySelectorAll(".div");
array.forEach(button => {
    button.addEventListener('click', function (){
        console.log(this.textContent)
    })
});
 <div class=div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

I Used a for loop and a for each loop. None worked.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I was calling all the elements with the class .div.

    What I wanted was to call the buttons inside the element with the class .div.

    Solution: add 'button' after .div:

    const array = document.querySelectorAll(".div button");

    And now it works:

    const array = document.querySelectorAll(".div  button");

array.forEach(button => {
    button.addEventListener('click', function (){
        console.log(this.textContent)
    })
});
    <div class=div>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
</div>


  2. 0

    You can access the event.target to get the context of the click.

    document.querySelectorAll('.my-div').forEach(function(button) {
  button.addEventListener('click', function(event) {
    console.log(event.target.textContent)
  })
});
    <div class="my-div">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

    Even better, you could delegate the event and reuse the listener for any button that matches the selector.

    document.querySelector('.my-div').addEventListener('click', function(event) {
  if (event.target.matches('button')) {
    handleClick(event);
  }
});

function handleClick(event) {
  console.log(event.target.textContent);
}
    <div class="my-div">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>
    Login or Signup to reply.
  3. 0

    Your code is looping through the array of div elements and adding an event handler to the div element, rather than the buttons.

    but instead of looping through all the buttons, use "event delegation" where you set up a single handler at an ancestor of all the buttons (the div in this case) and check the event.target, which refers to the object that actually fired the event. Much simpler approach – no loops, no arrays.

    // Set up event handler at the object that contains all the buttons
document.querySelector(".div").addEventListener("click", function(){
  // Check to see if the event originated at an element you care to handler
  if(event.target.nodeName === "BUTTON"){
    console.log(event.target.textContent);
  }
});
    <div class=div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search