querySelectorAll not working

Hi everyone I realise this : https://codepen.io/alpha_66/pen/MWxoLZJ the problem appear when I use querySelectorAll to select all li tag I get this message if I just use querySelector('li'); is working but only for one element can I some idea about how to fix this problem ? thanks
No description
16 Replies
Jochem
Jochem10mo ago
That one returns an array, you have to loop over the array and add listeners to each record yourself.
Jochem
Jochem10mo ago
MDN Web Docs
Document: querySelectorAll() method - Web APIs | MDN
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
Caps-look
Caps-look10mo ago
for(let i=0; i<couleur.length;i++){
couleur[i].addEventListener(/*...*/);
/*...*/
}
for(let i=0; i<couleur.length;i++){
couleur[i].addEventListener(/*...*/);
/*...*/
}
Jochem
Jochem10mo ago
you forgot ; i++ in the for loop descriptor
Caps-look
Caps-look10mo ago
thanks
Pat66
Pat6610mo ago
I try like this :
const couleur=document.querySelectorAll("li");
// console.log(couleur);

for(let i=0;i<couleur.length;i++){

couleur[i].addEventListener("mouseover",()=>{
couleur.classList.add('ch');
console.log('pat66');
})

}

const couleur=document.querySelectorAll("li");
// console.log(couleur);

for(let i=0;i<couleur.length;i++){

couleur[i].addEventListener("mouseover",()=>{
couleur.classList.add('ch');
console.log('pat66');
})

}

Pat66
Pat6610mo ago
I have this message :
No description
Jochem
Jochem10mo ago
couleur[i].classList.add might work
Pat66
Pat6610mo ago
the new one:
const couleur=document.querySelectorAll("li");
// console.log(couleur);

for(let i=0;i<couleur.length;i++){

couleur.addEventListener("mouseover",()=>{
couleur[i].classList.add('ch');
console.log('pat66');
})


couleur[i].addEventListener("mouseout",()=>{
couleur[i].classList.remove('ch');
console.log('pat66');
})

}
const couleur=document.querySelectorAll("li");
// console.log(couleur);

for(let i=0;i<couleur.length;i++){

couleur.addEventListener("mouseover",()=>{
couleur[i].classList.add('ch');
console.log('pat66');
})


couleur[i].addEventListener("mouseout",()=>{
couleur[i].classList.remove('ch');
console.log('pat66');
})

}
now I have :Uncaught TypeError: couleur.addEventListener is not a function
Jochem
Jochem10mo ago
you didn't add [i] to the first addEventListener
Pat66
Pat6610mo ago
OK I had it
Pat66
Pat6610mo ago
No description
Pat66
Pat6610mo ago
const couleur=document.querySelectorAll("li");
// console.log(couleur);

for(let i=0;i<couleur.length;i++){

couleur[i].addEventListener("mouseover",()=>{
couleur.classList.add('ch');
console.log('pat66');
})


couleur[i].addEventListener("mouseout",()=>{
couleur.classList.remove('ch');
console.log('pat66');
})

}


const couleur=document.querySelectorAll("li");
// console.log(couleur);

for(let i=0;i<couleur.length;i++){

couleur[i].addEventListener("mouseover",()=>{
couleur.classList.add('ch');
console.log('pat66');
})


couleur[i].addEventListener("mouseout",()=>{
couleur.classList.remove('ch');
console.log('pat66');
})

}


Jochem
Jochem10mo ago
I'd recommend reading up on how for loops and scope work. You're looping over couleur, one by one, but that doesn't change the value of couleur. Inside the for loop, you can access the children of couleur by adding [i]. You're indexing into the array of couleur, going to index i, and access that particular child when you read those errors, they say exactly what's wrong. You're trying to access the property add or remove on the classList property of the array couleur, which doesn't have a classList property, so it's producing an error it says "cannot read properties of undefined (reading 'add')" because couleur.classList is undefined on an array. In this particular array, it is accessible on its children though I'd recommend trying to figure this one out on your own, based on ^ that, but if you want to have the solution You just need to add [i] to the couleur in the two event listeners
MarkBoots
MarkBoots10mo ago
btw, different from the question how to do the loops. you are adding/removing the same class on mouse over and mouse out. you do know you can use css hover?
li:hover{
background-color: green;
}
li:hover{
background-color: green;
}
Pat66
Pat6610mo ago
thanks for your message but the exercise need JS
Want results from more Discord servers?
Add your server