martes, enero 03, 2017

Hacer un mismo botón con javascript con dos funciones

CÓDIGO HTML
 
<div class="div">Contador impar
 <p id="contadorImpar">0</p>
</div>
<div class="div">Contador par
 <p id="contadorPar">0</p>
</div>
<div style="clear:both"></div>
<button id="miBoton">Botoncillo</button>

Lo que he hecho es una función que va a alternar dos estados a y b, el a ejecutará la función impar y el b ejecutará la función par.

Es bastante sencillo en quanto lo ves funcionando.

CÓDIGO JAVASCRIPT
    
//CONTADOR IMPAR
var num1 = 0;
var num2 = 0;
sumarImpar = document.getElementById("contadorImpar");
sumarPar = document.getElementById("contadorPar");
$.fn.cambiador = function(a, b) {
    return this.each(function() {
        var clicked = false;
        $(this).bind("click", function() {
            if (clicked) {
                clicked = false;
                return b.apply(this, arguments);
            }
            clicked = true;
            return a.apply(this, arguments);
        });
    
    });
};
function impar() {
  num1++;
    console.log("Has sumado un número al contador impar y queda en: "+num1);
    sumarImpar.innerHTML = num1;
}
function par() {
  num2++;
    console.log("Has sumado un número al contador par y queda en: "+num2);
    sumarPar.innerHTML = num2;
}
$("#miBoton").cambiador(impar, par);
Aquí podéis verlo en jsfiddle, haz click en Result

No hay comentarios: