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"> <input type="button" value="Texto Dos"> <input type="button" value="Texto Tres"> <input type="button" value="Texto Cuatro"></form>
Todo muy sencillo. Y recordar el instanciar el framework Prototype al principio:
<script type="text/JavaScript" src="https://lineadecodigo.com/wp-content/uploads/2007/02/prototype.js"></script>
