2
votes

Effectuer une action après un certain nombre de clics, par exemple afficher une image

J'ai un compteur de clics et quelques fonctions, comment puis-je définir, qu'après / avec le par exemple 10e clic une fonction doit être exécutée? Utilisation de HTML, CSS, JavaScript.

J'ai essayé d'ajouter une clause if à ma fonction de compteur de clics en javascript en HTML, en activant une fonction censée jouer un son. Mais je l'ai mal fait, cela n'a pas fonctionné-

var audio = document.getElementById("audio");
  function playSound() {
  audio.currentTime = 0;
  audio.play();}

Compteur de clics. Pourquoi ne puis-je pas ajouter:

if (clicks == 10) playSound();

Pour ensuite laisser jouer le son en utilisant:

var clicks = 0;
function counting() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks; 
}


<p>Clicks: <a id="clicks"></a></p>

L'audio est défini avec l'audio de l'ID en HTML.

javascript html css counter

1 commentaires

S'il vous plaît pour la question suivante, vous pouvez créer un jsfiddle. La solution dont vous avez besoin est ici N'oubliez pas de lire sur cliquez sur les événements en javascript.

4 Réponses :

1
votes

Vous devrez peut-être utiliser eventListener pour compter les clics. Voir: https://www.w3schools.com/js/js_htmldom_eventlistener.asp < / p>

Si vous utilisez jQuery, la méthode click () peut vous aider. Voir: https://www.w3schools.com/jquery/event_click.asp < / p>

Vous pouvez également utiliser la méthode on () pour lier plusieurs événements en même temps. Voir: https://www.w3schools.com/jquery/event_on.asp < / p>

En ce qui concerne l'exécution d'une action après un certain nombre de clics, vous devrez probablement incorporer l'une ou l'autre méthode dans votre compteur. J'espère que cela aide d'une manière ou d'une autre!

0 commentaires

1
votes

J'ajouterais un event listener pour les clics et après chaque clic, il vérifie si le clickcounter est == 10;

Var counter = 0

document.getElementById("clicks").addEventListener(â€šclickâ€˜, () => {
 Counter++

 if (clicks == 10) {
   playSound() 
 }

})

0 commentaires

0
votes

Essayez (à la place == , vous pouvez utiliser par exemple > = pour exécuter la fonction plusieurs fois)

<div id="msg">Click somewhere</div>

document.onclick = e=> msg.innerHTML= (++counter==10) ? playSound() : counter ;

function playSound() { return "Play sound/ show picture" }
let counter=0;

0 commentaires

3
votes

Votre erreur était au lieu de "===" vous avez utilisé "=="

<p onclick="counting();">Clicks: <a id="clicks"></a></p>
<audio id="audio" controls="">
  <source src="https://www.html-seminar.de/downloads/musikausschnitt-mike-coustic-memories.mp3" type="audio/mpeg">
</audio>

var clicks = 0;
function counting() {
  clicks++;
  document.getElementById("clicks").innerHTML = clicks;   
  if (clicks === 10) {
    playSound();
  }
}
var audio = document.getElementById("audio");
  function playSound() {
    audio.currentTime = 0;
    audio.play();
  }

0 commentaires