J'essaye d'appliquer une animation à plusieurs éléments de la même classe (.whiteKey). Le code suivant l'ajoute uniquement à la première instance de l'élément. Pourquoi cela?
<button class="whiteKey"></button> <button class="whiteKey"></button> <button class="whiteKey"></button>
et le HTML:
document.querySelector('.whiteKey').classList.add('keysAnimate');
3 Réponses :
querySelector a > ne renvoie que le premier élément qui correspond au dom. Ce dont vous avez besoin est querySelectorAll () .
Ensuite, vous feriez quelque chose comme
const elements = document.querySelectorAll(".whiteKey");
elements.forEach(element => element.classList.add('keysAnimate'))
Merci pour le commentaire @iamcastelli, mais j'ai essayé après l'avoir vu dans un autre fil, et cela ne fonctionne pas. Mon code mis à jour: document.querySelectorAll ('. WhiteKey'). ClassList.add ('keysAn imate'); L'erreur de la console: (index): 77 Uncaught TypeError: Cannot read propriété 'add' d'undefined à HTMLButtonElement.
querySelectorAll () renvoie une NodeList, pas un seul nœud.
Ouais, alors ils devraient itérer dessus.
querySelector () sélectionne uniquement le premier élément avec cet identifiant / classe. Vous devrez sélectionner les boutons à l'aide de querySelectorAll () , puis les parcourir avec une boucle.
HTML:
var buttons = document.querySelectorAll(".whiteKey");
for(var i = 0; i < buttons.length; i++) {
buttons[i].classList.add('keysAnimate');
}
Comme mentionné par d'autres réponses, vous devez utiliser document.querySelectorAll () alors vous devez parcourir tous les nœuds de résultats, vous pouvez utiliser .forEach () pour les parcourir et ajouter la classe à la liste des classes, voici un extrait de code fonctionnel :
<button class="whiteKey">button 1</button> <button class="whiteKey">button 2</button> <button class="whiteKey">button 3</button>
.keysAnimate {
border: 1px solid red;
}
let whiteKeys = document.querySelectorAll('.whiteKey');
whiteKeys.forEach((el) => {
el.classList.add('keysAnimate');
});