3

muy buenas noches. Me gustaría saber como puedo hacer que el botón tenga 2 funciones, 1 click (funcion aumentar), 2 click(funcion decrementar). pero no me esta funcionando, cual es mi error en este caso?, alguien me podría ayudar?

esto lo tome como ejemplo.

function aumentar() {
  var result = ++numero;                               
  document.getElementById("numero").innerHTML = result; 
}
function decrementar(){
  var result = --numero;                               
  document.getElementById("numero").innerHTML = result; 
}


 function funciones() {
   if ( action == 1 ) {
     aumentar();
     action = 2;
  } else {
    decrmentar();
    action= 1;
  }
}
<div id="numero">1</div>
<button id="boton" value="Boton" onclick="funciones()">1 clic+ / 2 click -</button>

1
  • Si tienes el evento click y el evento doble click, te va a entrar dos veces en la función de click y 1 vez en la función de doble click, es lo que quieres?
    – lDanny7
    Commented el 19 nov. 2019 a las 8:21

1 respuesta 1

1

Puedes contar la cantidad de clicks usando setTimeout y entonces llamar a aumentar o a decrementar según haya habido uno o dos clicks.

Por ejemplo:

var elDiv = document.getElementById('numero');
var elButton = document.getElementById('boton');
var mResult = elDiv.innerHTML;

function aumentar() {
  elDiv.innerHTML = ++mResult;     
}

function decrementar() {
  elDiv.innerHTML = --mResult;     
}

var clickCount = 0;

elButton.addEventListener('click', function() {
    clickCount++;
    if (clickCount === 1) {
        singleClickTimer = setTimeout(function() {
            clickCount = 0;
            aumentar();
        }, 400);
    } else if (clickCount === 2) {
        clearTimeout(singleClickTimer);
        clickCount = 0;
        decrementar();
    }
}, false);
<div id="numero">1</div>
<button id="boton" value="Boton">1 clic+ / 2 click -</button>


3
  • justamente es lo que necesitaba, me funciona perfecto y gracias!, solo por pura curiosidad, de esta misma forma se puede hacer con 3 click? es solo por preguntar. ya que me llama lo atención, pero repito me funciona bastante bien su código.
    – BernalHD
    Commented el 19 nov. 2019 a las 16:22
  • @BernalHD no lo he probado, puedes intentar a agregar un else if como este } else if (clickCount === 2) { poniendo el código como en ese caso, pero usando el valor 3 y llamando a una tercera función. Aunque si fuera así quizá convenga mejor recurrir a algo más refinado, sobre todo porque el concepto triple click no existe en general y puede haber confusión si se pasa mucho tiempo en dar el tercero de esos tres clicks, que se confunda con un click simple, etc. Incluso para el caso que nos ocupa, yo pondría dos botones, uno con el signo + y otro con el signo -. Es mucho mejor.
    – A. Cedano
    Commented el 19 nov. 2019 a las 16:25
  • bueno si tiene razón, es muy raro usan 3 click, bueno en este caso ocupo 2 botón con 2 funciones, tal como esta queda genial, y de nuevo gracias.
    – BernalHD
    Commented el 19 nov. 2019 a las 21:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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