Linea de Codigo

En los últimos años de la web estamos tendiendo a interfaces de usuario con muchísima funcionalidad y mayor dinamismo. En todo este flujo de información, los elementos se van modificando y actualizando. Normalmente en forma asíncrona.

Es por ello que es bueno que sepamos como podemos hacer esto vía código y utilizando el framework Prototype. Prototype nos ayudará mediante sus funciones a llevar a cabo nuestro cometido.

Lo primero que tenemos que saber es como acceder a una capa (asumimos que ya existe la capa). Para ello utilizaremos la función $() pasándole el id de la capa como parámetro.

$('idcapa');

Como queremos reaprovechar el código vamos a crear una función JavaScript que reciba el texto a poner en la capa y actualice el contenido de la misma. El contenido de una capa se puede modificar mediante el atributo .innerHTML. De esta forma nos quedaría la siguiente función:

<script type="text/javascript">
function modificarCapa(texto){
  $('micapa').innerHTML=texto;
}
</script>

Ahora solo nos quedará utilizar esta función desde alguna parte de la página. En nuestro caso hemos utilizado unos simples botones. Los cuales, mediante el evento onClick lanzarán dicho método:

 
<form action="#">
<input type="button" value="Texto Uno" onClick="modificarCapa('Texto Uno');return false;"/>
<input type="button" value="Texto Dos" onClick="modificarCapa('Texto Dos');return false;"/>
<input type="button" value="Texto Tres" onClick="modificarCapa('Texto Tres');return false;"/>
<input type="button" value="Texto Cuatro" onClick="modificarCapa('Texto Cuatro');return false;"/>
</form>
 

Todo muy sencillo. Y recordar el instanciar el framework Prototype al principio:

<script type="text/JavaScript" src="http://lineadecodigo.com/js/prototype/prototype.js"></script>

Visualizar el ejemplo | Descargar el código