JMiur [E]

¿Quién es quién? Este es Juan y aquel es Pedro; más fácil, este es Juan y aquella es Antonia. Facílisimo. No es necesario saber sus nombres para identificarlos y no confundirlos pero, pese a lo que muchos creen, las computadoras son idiotas. Es decir, hacen cuentas muy pero muy rápido pero ignoran todo lo que no les explicamos con pelos y señales.

Ese es el problema con los IDs que tanto se utilizan y que tantos problemas causan cuando ponemos dos cosas con el mismo nombre y sólo funciona una de ellas.

El ID se utiliza para IDentificar algo y ese algo debe ser ÚNICO, sólo debe haber uno con ese nombre en toda la página; si no lo es, el navegador no sabrá a cuál nos referimos cuando le decimos que haga algo. Por eso, los IDs no se ponen en todas las etiquetas, sólo los usaremos cuando sea necesario y la regla genérica dice que deberíamos reservalos exclusivamente para los sectores importantes, para definir los grandes rectángulos que conforman un sitio web: el header, las columnas, el footer, etc.

Pero, también los usamos cuando requerimos identificar sectores auxiliares, cualquier cosa que se nos ocurra manipular con JavaScript.

Vamos a un ejemplo que no funcionará.

Una funcióm simple que permuta la visibilidad de una etiqueta. Dado su ID, si está oculta se muestra y si está visible se oculta:
<script>
  function toggletag(cual) {
    var elElemento = document.getElementById(cual);
    if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
    } else {
      elElemento.style.display = 'block';
    }
  }
</script>
Ponemos dos DIVs y queremos ocultar el segundo pero ... en ambos hemos usado el mismo ID:
<div id="mi_id" style="display:block;"> Este es un DIV cualquiera ... </div>
<div id="mi_id" style="display:block;"> Este es el DIV que quisiera ocultar ... </div>
<a href="javascript:toggletag('mi_id');">click</a>
El resultado será este:

Este es un DIV cualquiera ...
Este es el DIV que quisiera ocultar ...
click

No funciona. Se oculta el primero y no el segundo ya que el navegador lo encontró primero e ignora al otro.

Todo se debe a ese detalle, ambos tienen el mismo ID así que, para que esto funcionara, deberíamos ponerles nombres diferentes:
<div id="mi_id_1" style="display:block;"> Este es un DIV cualquiera ... </div>
<div id="mi_id_2" style="display:block;"> Este es el DIV que quisiera ocultar ... </div>
<a href="javascript:toggletag('mi_id_2');">click</a>
Este es un DIV cualquiera ...
Este es el DIV que quisiera ocultar ...
click

Y todos felices ...

3 comentarios:

Santi Folch  

Buen detalle Miur (yo esto lo aprendí por las duras). Sigue con detallitos de JavaScript, son buenos para ir aprendiendo :)

Responder
Graciela  

Continúa así, la popular lo pide :P

Responder
Gem@  

Magnifica explicación, eres un crack :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR