Fonction java script à répéter

Je souhaite éviter de multiplier mon code.

a marqué ce sujet comme résolu.

Bonjour, alors voila j’aimerais créer une page alphabet pour mon fils et j’ai donc les 26 lettres.

J’ai créé une fonction javascript:


function jouerUnSon() {
    var music = new Audio();
    music.src = "A.mp3";
    music.play();
}

Seulement cette fonction joue donc la lettre A avec le code html :

<p class="lettreSeul" onclick="jouerUnSon()">A a </p>

Existe t’il un moyen ou un tuto afin de faire une fonction avec laquelle je pourrai donc simplement changer la lettre sans créer 26 fonction ?

+0 -0

Hello, tu peux aussi générer tes boutons :

var body = document.querySelector('body');
/* Générer */
new Array(26)
    .fill(0)
    .forEach(function (_, i) {
        /* Calculer la lettre à afficher en se basant sur l'encodage UTF-8 */
        var letter = String.fromCharCode(65 + i);
        /* Créer le bouton */
        var btn = document.createElement('button');
        btn.innerHTML = letter;
        btn.className = "lettreSeul";
        /* Ajouter à la balise <body> de la page */
        body.appendChild(btn);
        /* Définir l'événement au clic */
        btn.onclick = function () {
            var music = new Audio();
            music.src = letter + ".mp3";
            music.play();
        };
    });
+1 -0

On peut aussi éviter d’utiliser onclick qui est une méthode ancienne pas très propre, en mettant un écouteur :

btn.dataset.lettre = letter; // On créer un attribut `data-lettre` pour chaque bouton (peut aussi être défini dans le HTML directement)

// …

btn.addEventListener('click', (event) => {
    jouerUnSon(event.target.dataset.lettre);
});
+4 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte