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

La fonction GCP Cloud pour écrire des données dans BigQuery s'exécute avec succès, mais les données n'apparaissent pas dans la table BigQuery

Image
J'exécute la fonction cloud suivante. Il s'exécute avec succès et indique que les données ont été chargées dans la table. Mais lorsque j'interroge BigQuery, aucune donnée n'a été ajoutée. Je ne reçois aucune erreur et aucune indication que cela ne fonctionne pas. from google.cloud import bigquery import pandas as pd def download_data(event, context): df = pd.read_csv('https://covid.ourworldindata.org/data/ecdc/full_data.csv') # Create an empty list Row_list =[] # Iterate over each row for index, rows in df.iterrows(): # Create list for the current row my_list =[rows.date, rows.location, rows.new_cases, rows.new_deaths, rows.total_cases, rows.total_deaths] #print(my_list) # append the list to the final list Row_list.append(my_list) ## Get Biq Query Set up client = bigquery.Client() table_id = "<project_name>.raw.daily_load" table = client.get_table(table_id) print(client) print(table_id) print(table) errors = client.insert_rows(...
Lire la suite

Erreur Symfony : "Une exception a été levée lors du rendu d'un modèle"

j'essaie d'inclure <link href="{{ asset('css/mystyle.css') }}" rel="stylesheet"/> dans mon fichier twig et le rendre. Mais cela me donne une exception PHP non interceptée Twig_Error_Runtime : "Une exception a été levée lors du rendu d'un modèle ("Le fichier manifeste de l'actif "/../public/build/manifest.json" n'existe pas.") ça marche quand j'utilise link href="css/mystyle.css" rel="stylesheet"/> . Voici mon contrôleur: <?php namespace App\Controller; use Symfony\Component\Routing\Annotation\Route; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; class WelcomeController extends AbstractController { /** * @Route("/", name="welcome") */ public function index() { return $this->render('welcome/index.html.twig'); } } Voici mon modèle de brindille : <!doctype html> ...
Lire la suite