Bienvenidos sean a este post, hoy veremos otro metodo del objeto document.
En este post hablamos sobre como asociar un elemento del HTML con una variable atraves del atributo id de este, pero en algunas circunstancias estas no funcionaran porque tenemos elementos que son una colecccion HTML y en lugar de ser uno solo seran varios con el mismo nombre, veamos como es su sintaxis:
var objeto = document.getElementsByName(nombre);Como pueden ver es muy similar al getElementById pero para este caso usaremos el atributo name en lugar de id, por esta razon este campo debe existir en cada uno de los elementos en donde lo vamos aplicar, con esto comentado hagamos un ejemplo para verlo en accion y nos quede mas claro.
Para ello crearemos un archivo de tipo HTML en el escritorio y luego lo abriremos con el navegador, por ejemplo pueden generar un archivo llamado nombre.html y le agregan el siguiente codigo:
nombre.html
<html>
<head>
<title>getElementsByName</title>
</head>
<body>
<input type="radio" name="radio" value="1">Radio 1</input><br>
<input type="radio" name="radio" value="2">Radio 2</input><br>
<input type="radio" name="radio" value="3">Radio 3</input><br>
<input type="radio" name="radio" value="4">Radio 4</input><br>
<input type="radio" name="radio" value="5">Radio 5</input><br>
<div id="texto"></div>
</body>
<script language="javascript">
<!--
var r, t;
r = document.getElementsByName("radio");
t = document.getElementById("texto");
for(i=0; i < r.length; i++)
{
r[i].addEventListener("click", actuar, false);
}
function actuar()
{
for(j=0; j < r.length; j++)
{
if (r[j].checked)
t.innerHTML = "El valor es " + r[j].value;
}
}
//-->
</script>
</html>Parece un ejemplo complejo pero no lo es tanto, hablemos primero sobre el codigo HTML, en este caso solo tendremos cinco elementos INPUT y estos seran de tipo RADIO, todos tendran el mismo nombre, radio, con el atributo name, no usamos a id, y cada uno de estos elementos tendran un valor distinto, iran del 1 al 5, por ultimo cada uno tendra una etiqueta para identificarlo, tambien tendremos un DIV donde mostraremos el valor de cada seleccion, la pagina se vera de la siguiente forma
Con esto comentado pasemos a hablar sobre el codigo Javascript, primero declararemos dos variables, luego usaremos estas variables para asociarlas con los elementos del HTML, la primera variable r la asociaremos por medio de getElementsByName a los INPUT de tipo RADIO, observen que pasamos el nombre de radio al metodo, la siguiente variable la asociaremos al DIV por medio de getElementById, la primera asociacion generara automaticamente un array con todos los elementos del mismo nombre pero cada uno tendra su posicion en el mismo, por esta razon despues tendremos este bucle:
for(i=0; i < r.length; i++)
{
r[i].addEventListener("click", actuar, false);
}Aca pasaremos por todos los elementos del array, observen que usamos la propiedad length, esta nos devuelve la cantidad de elementos en esta, en el cuerpo del bucle a cada elemento del array le agregaremos el metodo addEventListener para asociar a cada elemento con el evento click, el cual cada vez que se ejecute llamara a la funcion actuar, pasemos a verla:
Nota: Si quieren saber mas sobre el metodo addEventListener les recomiendo este post.
function actuar()
{
for(j=0; j < r.length; j++)
{
if (r[j].checked)
t.innerHTML = "El valor es " + r[j].value;
}
}Volvemos a repetir el bucle para que pase por todos los elementos del array generado, es exactamente igual al anterior, pero ahora tenemos un condicional donde verifica si la posicion esta seleccionada, la propiedad checked devuelve true cuando esta seleccionada y false cuando no lo esta, y en caso de ser verdadera procede a escribir en el DIV por medio de la variable t el valor que posee el elemento seleccionado, para ello le pasamos la posicion y la propiedad value, con todo esto comentado pasemos a ver el siguiente video para verlo en accion
Como podran ver a medida que apretemos cada elemento nos informara el valor correspondiente al elemento seleccionado, como dije al comienzo este metodo no reemplaza a getElementById sino que lo complementa para este tipo de elementos HTML que no podran ser accedidos de manera correcta por este metodo.
En resumen, hoy hemos visto a getElementsByName, que es, como trabaja, sus similitudes y diferencias con getElementById, tambien hemos visto un ejemplo practico para verlo en accion, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 