Activador funciones Javascript III- interruptor on/off par / impar

(de la entrada Activador funciones Javascript)

Es por esto que necesitamos un elemento activador que indique a la función cómo debe comportarse. Como hemos comentado, se trata de un botón on/off, esto es, debe tener dos “posiciones”. Así, el trigger se va a construir en torno a una variable que se mueva entre dos únicos valores. Vamos paso a paso.

Recordemos nuestro html:

trigger3

La solución par o impar, si bien algo más compleja, es muy similar a la solución usando la variable booleana. El código completo en este caso sería algo así:

var n=0;
function despliega(){

n=n+1;
var pi=n%2;
if(pi==1){
document.getElementById(‘dos’).style.display=”block”;
}
else{
document.getElementById(‘dos’).style.display=”none”;
}

}

Como podemos ver, la diferencia está en este trozo de código que vamos a explicar a continuación:

n=n+1;

Con esta línea, creamos la variable n y definimos un contador del número de clicks que se hayan hecho en el elemento de activación (div1).

var pi=n%2;

Ahora, declaramos una variable pi que sea igual al resto (%) resultante de dividir n entre dos. Ya que la división de cualquier número entero dividido entre dos tiene como resto 0 (todos los pares) o 1 (todos los impares), conseguimos, al igual que en el caso del booleano, que la variable pi tenga solamente dos posibles resultados y podamos usar una estructura if-else para nuestros fines.

trigger5

De este modo ya disponemos de un interruptor y de una alternativa. Espero que estos dos recursos os sean de utilidad.

Anuncios

Activador funciones Javascript II- interruptor on/off verdadero / falso

(de la entrada Activador funciones Javascript)

Es por esto que necesitamos un elemento activador que indique a la función cómo debe comportarse. Como hemos comentado, se trata de  un botón on/off, esto es, debe tener dos “posiciones”. Así, el trigger se va a construir en torno a una variable que se mueva entre dos únicos valores. Vamos paso a paso.

Recordemos nuestro código:

trigger3

Primero, vamos a declarar una variable booleana, la cual sólo puede tomar dos valores, verdadero o falso. Como punto de partida, al declarar la variable le asignamos el valor verdadero:

 

1 – var n=true;

 

Ahora, vamos a crear la función a la que va a llamar el evento onclick que habremos situado en el div1:

 

2 – function despliega(){

 

La idea del activador es que cada posición corresponda con una función. En nuestro caso tendremos dos valores posibles de la variable, true/false, y dos posiciones posibles del div2, none/block. Así, necesitamos que, cuando la variable sea verdadera, el div2 se muestre, y que cuando sea falsa, el div 2 se oculte. Es decir:

 

4 – if(n==false){
5 – document.getElementById(‘dos’).style.display=”block”;

6 – }

7 – if(n==true){
8 – document.getElementById(‘dos’).style.display=”none”;
9 – }

 

Esto hará que el resultado de la función sea lo que queremos. Sólo nos queda cambiar el valor de la variable a su opuesto mediante la siguiente línea que introducimos en lo que sería la línea número 3 –

 

n=!n;

 

Con esto, conseguimos, cada vez que hagamos click en el div1, llamar a la función. Esta lo primero que hará será cambiar el valor de n a su opuesto. Como fuera de la función hemos asignado el valor original como true (que corresponde a display:none en el div2), cambiará a false, con lo que la propiedad display del div2 se cambiará a none según queríamos.

Si ahora hacemos click de nuevo en el div 1, la función cambiará el valor de n a su opuesto, es decir, de false a true,con lo que el div volverá a desaparecer al volver a tener display:none.

trigger4

Ya tenemos de manera fácil y sencilla un elemento disparador listo para usar en nuestras páginas web.

Como bola extra, podemos ver también otra alternativa basada en enteros pares o impares.

Activador funciones Javascript – interruptor on/off

En esta entrada vamos a aprender un poco de Javascript haciendo un trigger, esto es, un pequeño script cuya función sea activar o desactivar un grupo de funciones más complejas. Es decir, crearemos un interruptor de on/off para una aplicación.

Vamos a ver a un caso práctico que podemos aplicar a un menú desplegable. Tenemos dos elementos (divs) y queremos mostrar y ocultar uno de ellos solamente haciendo click en el otro. Un click muestra y el siguiente click esconde. En este caso, el evento onClick no nos sería de utilidad, ya que la función siempre se ejecutaría del mismo modo. Digamos que tenemos este html:

trigger1

Y este CSS:

trigger2

Para mostrar y ocultar el div dos, la función  onClick=”despliega()”, a la que llamamos desde el div uno podría ser algo así:

 

function despliega(){document.getElementById(‘dos’).style.display=”block”;}

 

pero después no podríamos ocultarla. Podríamos pensar escribirla de este modo:

 

function despliega(){

document.getElementById(‘dos’).style.display=”block”;

document.getElementById(‘dos’).style.display=”none”;
}

 

Pero la primera línea mostraría el elemento y la segunda lo volvería a ocultar, con lo que nunca llegaríamos a verlo. Es por esto que necesitamos un elemento activador que indique a la función cómo debe comportarse. Como hemos comentado se trata de  un botón on/off, esto es, debe tener dos “posiciones”. Así, el trigger se va a construir en torno a una variable que se mueva entre dos únicos valores. Vamos a ver dos modos de hacerlo con dos tipos distintos de variable:

Modo 1 – Booleano Verdadero / Falso

Modo 2 – Número Par / Impar