Checo10

Blog de tecnologías y computadoras.

Controles HTML “dinámicos” con Javascript.

Dejar un comentario Publicado por checo10 en 17/11/2010

Uno de los problemas que más he visto en muchos de nosotros estudiantes que empezamos programando para consola, luego para aplicaciones de escritorio, es que nos cuesta bastante el empezar con la programación web. Creo que el problema es que luego de estar acostumbrados a utilizar un sólo lenguaje (Java, C#, C++, etc…), nos topamos que para la programación web hay que utilizar de todo un poco (Html y Javascript, además del lenguaje de la plataforma que se utilice).

Si no tenemos a alguien que nos guíe, es probable que tengamos algunos problemas para dar los primeros pasos, pero al agarrar un poco el hilo, el aprendizaje se hará cada vez más y más fluido.

Uno de mis primeros problemas fué que necesitaba tener un botón de agregar y que saliera un campo de texto cada que presionaba ese botón, tras buscar y buscar terminé encontrando soluciones a medio andar que no me ayudarón en nada. Luego me dí a la tarea de buscar una página donde se utilizara un control de este tipo y ver el código fuente detrás de la página. Tras ver un poco lo que hacían me vino a la mente una forma un poco rústica de hacerlo, pero que por el momento me ha funcionado bastante bien, el método crear controles HTML en la página de forma normal, luego hacerlos invisibles y gracias a la magia de Javascript hacerlos visibles cada que se presione un botón.

Para no hacerla más de emoción, veamos un poco de código.

<html>

<head>

<title>Ejemplo</title>

<meta name=”Generator” content=”Editra/0.5.72″>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>

<script language =”JavaScript”>

var x = 1;

function agregar(){

x = x+1;

if(x>3){

alert(“No puedes agregar otro.”);

}else{

document.getElementById(“input” + x).style.display = “block”;

}

}
</script>

</head>

<body>
<input id=”input1″ type=”text”/>

<input id=”input2″ type=”text” style=”display: none;” />

<input id=”input3″ type=”text” style=”display: none;”/>

<a href=”#” onclick=”agregar()”>Agregar input</a>

</body>

</html>

Si copiamos y pegamos este código en un editor de texto y lo guardamos con la extensión .html, luego lo abrimos, podrán ver el funcionamiento. Es bastante útil, y se pueden agregar tantos campos como se deseen, además se puede utilizar para controles de todo tipo, como select, textarea, renglones de una tabla, etc. También pueden ver las opciones del estilo display que pueden utilizar, todo esto lo pueden encontrar en la página de w3cschools.com.