2

¿Cómo hacer un if/else, según cada 3 veces que se apriete un botón con cierta ID? ¿Y cómo hacer que cada una de las veces me muestre un alert?

Mi intento:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input id="play"onclick="start()"type="button" value="Jugar">
<input id="replay"type="button" value="volver a jugar">
<script>
function start(){
    var i = 0;
    var b = "";

    window.addEventListener("load", each3);

    function each3() {
        b = document.getElementById("play").addEventListener("click", contador);


        function contador() {
            i = i + 1;
        }

        if (i == 3) {
            alert('yay!');
        }
    }
}
</script>

</body>
</html>

Deseo solamente una solución en JavaScript.

2
  • ¿Lo que quieres es que salte un mensaje la tercera vez que se haga click sobre el botón play? el 23 may. 2017 a las 11:15
  • cada 3 veces que se haga click el 23 may. 2017 a las 11:19

3 respuestas 3

5

Para realizar una acción cada 3 veces que se pulse un botón no tienes más que crearte un contador e ir actualizándolo en el evento click.

Mira este ejemplo:

(function(){
  var contador = 0;
  
  document.getElementById('play').addEventListener('click',
    function(){
      if (contador === 2){
        alert('Tercera vez que se pulsa el botón');
        contador = 0;
      }
      else{
        contador++;
      }
    });
})();
<input id="play" type="button" value="Jugar">

2
  • wow, la función anónima como sabe las veces que se ha dado click , si antes no has sumado en un contador? el 23 may. 2017 a las 11:23
  • jeje, ya entendí gracias asier!!! el 23 may. 2017 a las 11:25
0

La solución de Asier Villanueva es la óptima, pero yo he intentado moldear tu código y hacerlo como tú quieres:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input id="play"onclick="start()"type="button" value="Jugar">
<input id="replay"type="button" value="volver a jugar">
<script>
function start(){

 i = 0;
 b = "";

document.getElementById("play").removeAttribute("onclick");
document.getElementById("play").setAttribute("onclick","contador()");
}

function contador() {

i = i + 1;

if (i == 3) {

alert('yay!');
}

}

</script>
</body>
</html>









</script>

</body>
</html>

1
0

He estado un momento intentando leer tu código y debo admitirlo, me resultó un poco ambiguo, porque hay como unas funciones muy simples y mucho espacio en blanco. Voy a ver si he entendido lo que quieres lograr.

Por lo que entiendo de tu enunciado, quieres que cada 3 veces que hagas click en un botón tome cierta acción, que en este caso es un alert().

Tienes tres funciones escritas pero solo te bastaría una para conseguir lo que tu quieres lograr, esto se podría llamar refactorización en este caso, porque estamos simplificando nuestro código para obtener las mismas funcionalidades que teníamos antes con un menor coste de recursos.

1 - Antes que nada, comentarte que el objeto window dispone de un método llamado onLoad(), el cual lo que suceda dentro de su bloque de código, lo hará después de cargar la estructura de tu DOM. Así podemos deshacernos de ese primer Listener que tienes para cargar, se quedaría así:

window.onload = loadEvents; // Cabe destacar que no hace falta declararla con () 

function loadEvents() {
   // Accion a realizar al cargar el DOM
   var contador = 0; //Nuestra variable que recogerá los clicks del botón.
   playButton = document.getElementById('play');
   // Guardamos nuestro botón en una variable para acceder a ella.
}

2 - Vale, con nuestra función de carga escrita y conseguido acceder a nuestro botón, podemos disponernos a conseguir la interacción con ese botón:

function loadEvents() {
   var contador = 0;
   playButton = document.getElementById('play');
   //Se puede añadir el Listener a la variable para mejor legibilidad.
   playButton.addEventListener('click', cuentaClicks, false);

}

3 - Nuestra función cuentaClicks esta declarada en el Listener pero no codificada, así que vamos a ello:

function cuentaClicks() {

   if (contador < 3) {
     contador++; // Esto es similar a => contador = contador + 1
    } else {
        alert('yai!'); //Después de tres clicks se muestra nuestro alert()
        contador = 0; // Reiniciamos el contador para usarlo de nuevo.
    }
}

4 - Nuestro código final quedaría así:

<script>
 window.onload = loadEvents;

  function loadEvents() {

   var contador = 0; // Variable global que utilizaremos de contador

   playButton = document.getElementById('play');
   //Se puede añadir el Listener a la variable para mejor legibilidad.
   playButton.addEventListener('click', cuentaClicks, false);

}

function cuentaClicks() {

   if (contador < 3) {
     contador++; // Esto es similar a => contador = contador + 1
   } else {
        alert('yai!'); //Después de tres clicks se muestra nuestro alert()
        contador = 0; // Reiniciamos el contador para usarlo de nuevo.
    }
}

</script>

5 - ¡Un saludo! y espero que respondas si te ha funcionado o no :)

1
  • Creo que lo que haces en else se debe hacer en if y viceversa el 23 may. 2017 a las 17:52

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.