UPDATE Javascript document.querySelector | Only first Object works

Question

so heres an Update on my Code: My Code now is not bad, the effect on Container works but the other ones don't do you have some Ideas? :) I want to select all Elements which have these classes.

    //Movement Animation to happen
const card = document.querySelectorAll(".card");
const container = document.querySelectorAll(".container");
//Items
const title = document.querySelector(".title");
const cap = document.querySelector(".cap img");
const sizes = document.querySelector (".sizes");
const description = document.querySelector(".info h3");
const purchase = document.querySelector(".purchase button");

//Moving Animation Event
for (let i = 0; i < container.length; i++){
container[i].addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 3 - e.pageX) / 100;
    let yAxis = (window.innerHeight / 2 - e.pageY) / 100;
    card[i].style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  });
}

  //Animate In
  for (let i = 0; i < container.length; i++) {
container[i].addEventListener("mouseenter", (e) => {
    card[i].style.transition = "none";
    //PopOut
    title[i].style.transform = "translateZ(150px)";
    cap[i].style.transform = "translateZ(150px) rotateZ(-25deg)";
    sizes[i].style.transform = "translateZ(100px)";
    description[i].style.transform = "translateZ(125px)";
    purchase[i].style.transform = "translateZ(75px)";
});}

  //Animate Out
  for (let i = 0; i < container.length; i++) {
  container[i].addEventListener("mouseleave", (e) => {
    card[i].style.transition = "all 0.5s ease";
    card[i].style.transform = `rotateY(0deg) rotateX(0deg)`;
    //PopBack
    title[i].style.transform = "translateZ(0px)";
    cap[i].style.transform = "translateZ(0px) rotateZ(0deg)";
    sizes[i].style.transform = "translateZ(0px)";
    description[i].style.transform = "translateZ(0px)";
    purchase[i].style.transform = "translateZ(0px)";
  });}

may be [something like this](https://stackoverflow.com/a/19655662) or [this](https://flaviocopes.com/how-to-add-event-listener-multiple-elements-javascript/) — Pirate, Dec 17 '20 at 20:53
To select multiple elements, you do need to add `All`. But then, you need to loop over them, and [add the event listener to each of them individually](https://stackoverflow.com/a/50643404/1913729). Or use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) — blex, Dec 17 '20 at 20:53

mpm · Answer 1 · 2020-12-17T21:15:29.270

As mentioned by @blex, querySelector will select only ONE element, instead use querySelectorAll, which will return an array* of elements. The loop over this array and add an event listener for each object:


const container = document.querySelectorAll("div.container");
…

for(elem of conatainer){
let id = conatainer.indexOf(elem)
elem.addEventListener("mouseleave", (e) => {
    card[id].style.transition = "all 0.5s ease";
    card[id].style.transform = `rotateY(0deg) rotateX(0deg)`;
    //PopBack
    title[id].style.transform = "translateZ(0px)";
    cap[id].style.transform = "translateZ(0px) rotateZ(0deg)";
    sizes[id].style.transform = "translateZ(0px)";
    description[id].style.transform = "translateZ(0px)";
    purchase[id].style.transform = "translateZ(0px)";
  });

//etc.

//EDIT
//Moving Animation Event
for (let i = 0; i < container.length; i++){
elem[i].addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 3 - e.pageX) / 100;
    let yAxis = (window.innerHeight / 2 - e.pageY) / 100;
    card[id][i].style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  });
}
}

querySelectorAll in MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

*Actually it's a nodeList and not an array, but they behave nearly the same

But what do you du with the "Moving Animation Event" Section for example? with .card? — mcfiet, Dec 17 '20 at 21:11
you can think of `elem` as your new container, further you'll need to select each `card`, `cap`, … with the index id — mpm, Dec 17 '20 at 21:17
Hey Man, it worked perfectly. Thank you thousand times!!!!! :) — mcfiet, Dec 17 '20 at 21:36

score 0 · Answer 2 · answered Dec 17 '20 at 21:11

document.querySelector always returns just first element. So you need to use document.querySelectorAll and loop through array of elements.

Here is the quick example:

const allElements = Array.from(document.querySelectorAll('.element'))

allElements.forEach(element => {
  console.log(element);
})

UPDATE Javascript document.querySelector | Only first Object works

2 Answers2