En este capítulo y el siguiente, complementaremos los dos capítulos anteriores (7. El objeto document y 8.- La interfaz Node), en los cuales analizamos la teoría de dos de las herramientas más utilizadas de javascript que juntas podemos realizar modificaciones dinámicas de nuestra página web.
Para ello vamos realizar una transformación de un elemento input(<input>) por algunos de sus tipos, y esto lo haremos de una manera fácil, y comenzamos por tener el contenido HTML siguiente:
<div> <select id="comboMagico" onchange="CambiaComponente()"> <option selected="selected" value="TextBox">TextBox</option> <option value="Button">Button</option> <option value="CheckBox">CheckBox</option> </select> </div> <div> <input type="text" value="Input Magico" id="inputMagico" /> </div>
Tenemos un elemento combobox (<select>) y un elemento input (<input>) los cuales tienen su id para poderlos identificar; el elemento combobox contiene una función que se activa en el evento onchange (como vimos en el capitulo de eventos de este curso) y que se activa cada que cambiamos la opción seleccionada de nuestro combobox.
Lo que haremos a continuación es que al ser cambiada la opción del combobox, nuestro input de la parte de abajo, se transforme en el tipo seleccionado, es decir si seleccionamos la opción Button, nuestro input se transforme en un botón.
Para ello haremos la función que invoca el combobox de nombre CambiaComponente() de la siguiente manera:
function CambiaComponente(){
//utilizando el metodo getElementById de document obtenemos el nodo del combobox
//y con el atributo value obtenemos la opcion seleccionada
opcion=document.getElementById("comboMagico").value
//Hacemos un switch case, dependiendo la opcion seleccionada en el combobox realizamos una transformación.
switch (opcion){
case "TextBox":
document.getElementById("inputMagico").type="text"
break;
case "Button":
document.getElementById("inputMagico").type="button"
break;
case "CheckBox":
document.getElementById("inputMagico").type="checkbox"
break;
}
}
Lo que hacemos con la función es obtener el valor seleccionado por medio del objeto document, la función getElementById y el atributo value, y después analizarla con un switch case para así transformar nuestro input en el valor elegido.
Para ver un ejemplo del código en ejecucion, ahora no pondre un den clic aqui, pueden observarlo abajo y ustedes hacer la prueba moviendo el combobox:
En este capitulo vimos la facilidad de modificar elementos HTML, y transformarlos, esto nos abre miles de posibilidades para realizar acciones dinámicas a nuestras páginas web.
Ir Capítulo Siguiente (10.- Creación de elementos HTML con Javascript)