0

Hey I am doing an project (musicplayer) in which I have to select all divs with classname ="songcard" using JavaScript. But I am unable to do it . When I use addEventListener on it, it says, 'addEvenListener is not a function'. But when I change the queryselector all to only queryselector the first div with class name song card is selected.

This is my html code==>

<div>
  <div class="  songcard     ">
    <img src="assests/Ik Tera by Maninder Buttar.jpg" alt="">
    <div class=" bg-white text-black pl-2">
      <h1 class="font-bold"> Ik Tera </h1>

      Maninder Buttar
    </div>


  </div>
  <div class="  songcard     ">
    <img src="assests/Dil Bechara.jpg" alt="">
    <div class=" bg-white h-12 text-black pl-2">
      <h1 class="font-bold"> Dil Bechara </h1>


    </div>


  </div>

Sorry I removed some tailwind classes to not confuse u. Ok this is my Js code

let songcard = document.querySelectorAll(".songcard");
songcard.addEventListener('click', () => {
  songcard.classList.toggle('text-white')
  console.log('working')
})

I researched on stackoverflow but i didn't found anything. So if you can help in my project it will be good for me.

Note = English is not my native language hence sorry.

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
reyangurjar
  • 1
  • 3
  • 1
    Because in your example `songcard` won't be a single div-- it will be an _array_ of divs (or more specifically, a node list). Regardless, you can't add an event listener to an array-- you have to iterate over every div in the list and add your event listener to each one. Or alternatively add a single event listener to the document and just listen to see if the clicked item has class `.songcard`. – Alexander Nied Apr 19 '22 at 13:28
  • Bro can you tell me how i can iterate the array. I am not saying to send the code you can just send me some resource link so i can learn it. – reyangurjar Apr 19 '22 at 13:33
  • The duplicate marked on your closed question contains a whole bunch of resources explaining how this works. Alternatively, for a single quick reference, [the MDN page on `querySelectorAll` has a section titled "Accessing the matches"](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#accessing_the_matches). – Alexander Nied Apr 19 '22 at 13:36
  • method querySelectorAll() method returns a NodeList representing a list of the document's elements that match the specified group of selectors. So the addEventListener would not work here you need to iterate over the NodeList with something link a for each like so ``` let songcards = document.querySelectorAll(".songcard"); songcards.forEach(songcard => { songcard.addEventListener('click', () => { songcard.classList.toggle('text-white') console.log('working') }); }) ``` I hope this helps you – Marcel Apr 19 '22 at 13:43
  • Thank you bro So much bro. This problem happended to me a lot of time in projects i knew i have to iterate that but i didn't knew how to actually iterate that. SO, thankyou so much. – reyangurjar Apr 21 '22 at 05:01

0 Answers0