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

Comment convertir une interface{} qui est vraiment une tranche de types dont le genre est reflect.Int32 en tranche de int32 ?

J'ai ce qui suit: type Int32A int32 type Int32B int32 et souhaite implémenter une fonction qui peut accepter n'importe quelle tranche de types dont le type est reflect.Int32 et le convertir en []int32 . Par example: func ConvertTypeSliceToInt32Slice(es «es-type») []int32 { result:= make([]int32, len(es)) for i:= 0; i < len(result); i++ { result[i] = es[i].(int32) } return result } func caller() { Int32as:= Int32A{1, 2} Int32bs:= Int32B{3, 5} int32as:= ConvertTypeSliceToInt32Slice(Int32as) int32bs:= ConvertTypeSliceToInt32Slice(Int32bs) } Comment cela peut-il être fait avec n'importe quelle définition de type arbitraire dont le genre est reflect.Int32 ? (Contexte : cette fonction sera utilisée pour convertir des tranches de proto enum s ; c'est-à-dire que l'ensemble complet des types est inconnu et illimité, il switch n'est donc pas possible d'effectuer un a sur chaque type). De plus, j'utilise 1.17 donc je ne peux pas utiliser de types pa...
Lire la suite

Comment cloner uniquement un sous-répertoire d'un référentiel Git ?

J'ai mon dépôt Git qui, à la racine, a deux sous-répertoires: /finisht /static Lorsque ceci était dans SVN, /finisht a été extrait à un endroit, alors qu'il /static a été extrait ailleurs, comme ceci : svn co svn+ssh://admin@domain.com/home/admin/repos/finisht/static static Y a-t-il un moyen de faire cela avec Git? Solution du problème git clone --filter de git 2.19 fonctionne maintenant sur GitHub (testé 2021-01-14, git 2.30.0) Cette option a été ajoutée avec une mise à jour du protocole distant, et elle empêche véritablement le téléchargement d'objets depuis le serveur. Par exemple, pour cloner uniquement les objets requis pour d1 ce référentiel de test minimal : https://github.com/cirosantilli/test-git-partial-clone, je peux faire : git clone \ --depth 1 \ --filter=blob:none \ --sparse \ https://github.com/cirosantilli/test-git-partial-clone \ ; cd test-git-partial-clone git sparse-checkout set d1 Voici une version moins minimale et plus réaliste sur https:...
Lire la suite