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

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 )

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 )

Google+ photo

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

Conectando a %s