Cambiar elementos al hacer click

De ChuWiki

El código javascript[editar]

Vamos a ver en este tutorial cómo conseguir con javascript que al hacer click sobre un elemento de una página html, se cambie por otro elemento ocupando la misma posición. Para ello debemos tener en cuenta dos atributos de estilo de los componentes html.

  • visibility: indica si el componente es visible o no. Usaremos los posibles valores hidden y visible
  • display: indica si el componente debe ocupar su hueco dentro de la página html o no. Si ocupa su hueco y no es visible, veremos un espacio en blanco en la página, donde está el componente. Usaremos los valores block y none de este atributo. block indica que sí debe ocupar su hueco normalmente y none que no debe ocupar ningún hueco.

Está claro que para ocultar o visualizar un componente, bastará cambiar el atributo visibility. Si sólo cambiamos este atributo, el elemento podrá estar oculto, pero seguirá ocupando su hueco, por lo que veremos el hueco vacío. Si además, como en nuestro caso, queremos que tanto el componente visible como el oculto ocupen la misma posición dentro de la página, al oculto debermos ponerle display:none, mientras que al visible, display:block, de esta forma el display:none no ocupará hueco alguno.

La página html con dos párrafos, uno oculto y que no ocupa hueco y el otro visible normalmente, quedaría así 

<html>
   <head>
   </head>
   <body>
      <p id="primero" style="visibility:visible; display:block;">primero</p>
      <p id="segundo" style="visibility:hidden; display:none;">segundo</p>
   </body>
</html>

Por supuesto, visible y block son las opciones por defecto, así que no haría falta ponerlo en el caso del primer elemento. Es importanate a cada uno darles un id distinto para que luego nuestro código javascript pueda localizarlos.

Añadimos ahora el código necesario para que al hacer click sobre ellos se llame a una función javascript. Estas funciones serán visuliza_primero() y visualiza_segundo() 

<html>
   <head>
   <script type="text/javascript">
      function visualiza_primero() {
         document.getElementById('primero').style.visibility='visible';
         document.getElementById('primero').style.display='block';
         document.getElementById('segundo').style.visibility='hidden';
         document.getElementById('segundo').style.display='none';
      };
      function visualiza_segundo() {
         document.getElementById('segundo').style.visibility='visible';
         document.getElementById('segundo').style.display='block';
         document.getElementById('primero').style.visibility='hidden';
         document.getElementById('primero').style.display='none';
      };
   </script>
   </head>
   <body>
      <p id="primero" style="visibility:visible; display:block;" onclick="visualiza_segundo()">primero</p>
      <p id="segundo" style="visibility:hidden; display:none;" onclick="visualiza_primero()">segundo</p>
   </body>
</html>

La función visualiza_primero() únicamente pone a visible y block los atributos correspondientes del elemento primero (getElementById('primero')) y pone a hidden y none los correspondientes de segundo. La función visualiza_segundo() hace lo mismo, pero al revés, hace visible y block al elemento segundo y oculta y none al elemento primero.

El resultado es una página web que muestra la palabra "primero". Al hacer click sobre ella, cambia a "segundo" y al volver a hacer click, a "primero"

Una posible utilidad[editar]

Imagina una aplicación web en la que estamos mostrando los datos de una persona, incluida su dirección de correo electrónico. Queremos que cuando haga click sobre el correo electrónico, se cambie por una caja de texto que le permita introducir su nuevo correo. Por supuesto, al pulsar <intro> sobre esta caja de texto, se debería enviar el nuevo correo al servidor para que lo almacene en su base de datos, pero eso ya es demasiado para este tutorial. El código html sería como este 

<html>
   <head>
   <script type="text/javascript">
      function visualiza_formulario() {
         document.getElementById('formulario').style.visibility='visible';
         document.getElementById('formulario').style.display='inline';
         document.getElementById('direccion').style.visibility='hidden';
         document.getElementById('direccion').style.display='none';
      };
   </script>
   </head>
   <body>
      <p>Tu dirección de correo es : </p>
      <p id="direccion" onclick="visualiza_formulario()">federico@perez.es</p>
      <form id="formulario" style="visibility:hidden; display:none;">
         <input type="text" name="cambia" value="federico@perez.es"/>
      </form>
      </p>
      <p>Haz click sobre el correo para cambiarla</p>
   </body>
</html>

Aparte de un poco de texto (el primer y último párrafo <p> dentro del body), hemos puesto un párrafo <p> con la dirección actual de correo (federico@perez.es) y un onclick que llama a la función javascript visualiza_formulario() encargada de ocultar la dirección de correo y poner en su lugar el formulario para pedirlas. Justo detrás del párrafo con la dirección hemos puesto el formulario con los atributos de estilo a hidden y none. Haciendo click sobre la dirección, se cambiará por un formulario. El formulario tiene de value="federico@perez.es" para que no salga vacío y muestra la dirección de correo que ya había.

Una vez visualizado el formulario y cambiada la dirección, pulsamos <intro> y la nuevo dirección la recibiría el servidor que se encargaría de cambiarla.


Efectos animados[editar]

En estos ejemplos hemos mostrado/ocultado los elementos usando javascript sin más, pero hay librerías como jQuery con la que se puede hacer todo esto de forma más vistosa, con animaciones

Obtenido de «https://chuidiang.org/index.php?title=Cambiar_elementos_al_hacer_click&oldid=5066»