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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s