le son lors du clic sur un bouton fonctionne pour un mais pas pour TOUS

Quelqu'un peut-il me montrer pourquoi si j'essaie de jouer un son comme ça

const button = document.querySelector(".button");
button.addEventListener("click", function () {
 document.getElementById("click").play("click.mp3");
});

le son ne jouera que sur le premier bouton (je comprends car il cible le premier élément) avec la classe.button mais si j'utilise querySlectorAll ça ne joue pas du tout s'il vous plait?

Et comment puis-je le faire jouer dans tous les boutons avec la classe.button?

Merci d'avance.

Merci à Barmar d'avoir suggéré d'utiliser une boucle. J'ai aimé ci-dessous et ça marche très bien.


for (let button of buttons) {
 button.addEventListener("click", function () {
 document.getElementById("click").play("click.mp3");
 });
 console.log(button);
}


Solution du problème

Dans mon cas, une solution efficace sera addEventListener au parent qui contient ces boutons et fera une condition de vérification que si l'élément cliqué a une classe ou un attribut de données, alors faites jouer votre son.

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Comment signer la connexion OKEx API version 5 avec websockets ?

Bien que cette question ait reçu une réponse pour les versions précédentes de l'API OKEx utilisant REST, elle ne l'a pas été pour la dernière version 5 de l'API utilisant des websockets. Les docs sont ici. Je reçois l'erreur suivante {"event":"error","msg":"Invalid sign","code":"60007"} , il doit donc y avoir un problème avec l'algorithme de chaîne de signature, mais je n'arrive pas à identifier où je fais une erreur. import hmac import json import time import hashlib import asyncio import websockets passphrase = "XXXX" secret_key = b"XXXX" api_key = "XXXX" timestamp = int(time.time()) print("timestamp: " + str(timestamp)) sign = str(timestamp) + 'GET' + '/users/self/verify' total_params = bytes(sign, encoding= 'utf-8') signature = hmac.new(bytes(secret_key, encoding= 'utf-8'), total_params, digestmod=hashlib.sha256).digest() sign...
Lire la suite

Détecter les appuis sur les touches fléchées en JavaScript

Comment détecter l'appui sur l'une des touches fléchées ? J'en ai profité pour savoir: function checkKey(e) { var event = window.event? window.event: e; console.log(event.keyCode) } Bien que cela fonctionnait pour toutes les autres touches, ce n'était pas le cas pour les touches fléchées (peut-être parce que le navigateur est censé faire défiler ces touches par défaut). Solution du problème event.key === "Flèche droite"... Plus récent et beaucoup plus propre: utilisez event.key . Plus de codes numériques arbitraires ! Si vous transpilez ou savez que vos utilisateurs utilisent tous des navigateurs modernes, utilisez ceci ! node.addEventListener('keydown', function(event) { const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown" }); Gestion détaillée : switch (event.key) { case "ArrowLeft": // Left pressed break; case "ArrowRight": // Right pressed break; c...
Lire la suite

Créer un fichier CSV à partir d'un fichier texte avec des jetons d'en-tête à l'aide de scripts shell

Je souhaite créer un fichier CSV à partir d'un ensemble de fichiers texte dans un répertoire avec la structure suivante pour les importer ultérieurement dans une base de données. Title: Article title Word Count: 100 Summary: Article summary. Can consist of multiple lines. Keywords: keyword1, keyword2, keyword3 Article Body: The rest of the article body. Till the end of the file. Le résultat souhaité est donc de les avoir dans un fichier CSV avec des sections comme en-têtes avec leur contenu comme suit. Title | Word Count | Summary | Keywords | Article Body | Article title | 100 | Article summary.\nCan... | keyword1, keyword2, keyword3 |... | Article2 title | 110 | Article summary.\nCan... | keyword1, keyword2, keyword3 |... | J'ai essayé quelques approches avec des scripts awk et shell, mais je n'ai pas réussi jusqu'à présent. Des idées? Solution du problème Selon la documentation de COPY, PostgreSQL prend entièrement en charge le format CSV, ainsi qu'un for...
Lire la suite