CODEWITHSUNDEEP
javascripthtmlcss-selectors
Heet Kalaria
Heet Kalaria

Reputation: 1

How to apply javascript to every element?

I am having a profile card and it has some hovering effect using js but when I copy paste the code to create 2 profile cards, the js is only applied to one card. What should I do. Code:



    <script>
        const clc = document.querySelector(".cancel").
        const arr = document.querySelector(".arr_container");
        const left_container = document.querySelector(".left_container");

        arr.addEventListener("click", ()=>{
            arr.classList.add("active_arr");
            if(left_container.classList.contains("off")){
                left_container.classList.remove("off");
                left_container.classList.add("active");
            }
        });
        clc.addEventListener("click", ()=>{
            arr.classList.remove("active_arr");
            if(left_container.classList.contains("active")){
                left_container.classList.remove("active");
                left_container.classList.add("off");
            }
        });
        
    </script>

I tried using onclick function.your text

Upvotes: 0

Views: 43

Answers (1)

Mohamed EL-Gendy
Mohamed EL-Gendy

Reputation: 574

querySelector return a single element of the content, so you need to use querySelectorAll instead. querySelectorAll returns an array of elements, so you will loop over the array to add your EventListener

const arr = document.querySelectorAll(".arr_container");

arr.forEach((card) => {
  card.addEventListener("click", ()=>{
      arr.classList.add("active_arr");
      if(left_container.classList.contains("off")){
          left_container.classList.remove("off");
          left_container.classList.add("active");
      }
  });
});

Upvotes: 1

Related Questions