.style is undefined (Alguien puede decirme que hago mal?)

[Xabu]

Bueno lo primero presentarme, soy nuevo en el foro. Aunque hace ya muchisimo tiempo atras que recurro a el para solucionar mis dudas. Pero esta no consigo solucionarla por mi mismo - .- Por eso recurro a vosotros.

Intento crear un menu, en el que al hacer click en uno de sus botones devuelva el "name" de un div. Dicho div pose el atributo "display: none", es decir, esta oculto. Y una funcion de javascript debe cambiar el display de ese div a "inline", es decir, ponerlo visible. Aqui el codigo:

Los DIVs:

Código:

<div name="berloni" id="catalogo">
    CONTENIDO DEL DIV
</div>
<div name="mobaux" id="catalogo">
    CONTENIDO DEL DIV
</div>
.
.
etc..

Estos son los elementos del menu:

Código:

<a href="javascript:catalogo('berloni')" class="b_catalogo" style="padding-left: 34px; padding-right: 34px;">Berloni</a>
<a href="javascript:catalogo('mobaux')" class="b_catalogo" style="padding-left: 29px; padding-right: 29px;">Mobaux</a>
<a href="javascript:catalogo('ondarreta')" class="b_catalogo" style="padding-left: 23px; padding-right: 23px;">Ondarreta</a>
.
.
etc...

Y aqui la funcion de javascript:

Código:

		function catalogo(n) {
			catalogos = document.getElementById('catalogo');
			if (catalogos.style.display != 'none') {
				catalogos.style.display = "none";
			}
			contenido = document.getElementsByTagName(n);
			contenido.style.display = 'inline';
		}

No puedo usar el document.getElementById porque utilizo muchos DIVs iguales, los cuales estan todos ocultos y pretendo que se muestren mediante esa funcion utilizando el atributo "name" para seleccionarlos, porque si uso el "id" estaria afectando a todos =S. El error que me tira siempre es que:

"contenido.style is undefined"

Lo he probado todo >.> Si alguien me ayuda me sentire muy aliviado, gracias de antemano.

PD: La primera parte de la funcion javascript es para hacer que se vuelvan a ocultar todos los divs antes de mostrar el nuevo, esto si me funciona ya que oculta el div que este visible pero no muestra el nuevo seleccionado XD.

[zerokilled]

getElementsByTagName devuelve una coleccion de elementos, algo parecido a un array. tienes que recorrerlo con un bucle para acceder a cada indice de la coleccion. aparte, y mas importante, getElementsByTagName requiere como parametro el nombre de elementos el cual es diferente al valor asignado al atributo name. es decir, al metodo le pasas nombres como "P", "DIV", "A", "TEXTAREA". el metodo que tu requieres es getElementsByName, fijate que no dice Tag. y por otro lado, probablemente no te funcione asignandole atributo name a los DIVs porque segun el estandar DIV no tiene dicho atributo. en todo caso la excepcion siempre la hace el navegador pero lo mas seguro no todos se comporten de esa manera. y mas aun, un ID tiene que ser unico en el documento. es decir, mas de un elemento no puede contener el mismo valor en el atributo ID. o sea, estas haciendolo al reves, name puede compartir el mismo valor pero ID no.

[Xabu]

Tambien utilizé el document.getElementsByName. Tampoco funciono, pero ahora se que es debido a que los DIVs no pueden usar el atributo NAME.

Muchas gracias. En cuanto a lo de que no deberian repetirse los "id", si lo hice es porque quiero que todos tengan las mismas caracteristicas, de esta forma me ahorro el tener que duplicar el codigo CSS hasta 8 veces solo para cambiarle el nombre...

En fin, a duplicar se ha dicho. Aunque ya puestos, si cambio esos DIVs por etiquetas <P> o <SPAN> o alguna otra, a estas si podría agregarles el atributo name y que funcionasen, ¿no?. Si es asi se me abre la puerta al cielo XD.

[zerokilled]

En cuanto a lo de que no deberian repetirse los "id", si lo hice es porque quiero que todos tengan las mismas caracteristicas, de esta forma me ahorro el tener que duplicar el codigo CSS hasta 8 veces solo para cambiarle el nombre...

para eso estan las clases de css. pudieras hacer algo como:

Código:

<div class="mi_clase" id="nivel01">...</div>
<div class="mi_clase" id="nivel02">...</div>
<div class="mi_clase" id="nivel03">...</div>
...

en css solo tendras definido la clase y la id es solo para hacer referencia al elemento en particular.

Aunque ya puestos, si cambio esos DIVs por etiquetas <P> o <SPAN> o alguna otra, a estas si podría agregarles el atributo name y que funcionasen, ¿no?. Si es asi se me abre la puerta al cielo XD.

tienes que leerte el estandar para que analices que elementos permiten dicho atributo. y no, ni P ni SPAN adimiten dicho atributo. hay varias soluciones a tu problema, depende de como lo quieras hacer.

una forma seria con un "rastreador", una variable que contiene la referencia del elemento visible. en cada invocacion a la funcion le asignas a esta variable la referencia del elemento a ser visible. pero antes, tienes que verificar si la variable ya tiene un elemento, y de ser asi, ocultas ese elemento. a mi juicio, esa es la forma mas facil y corta. un ejemplo del codigo podria ser...

Código:

var track = null;
function showHide(id){
if(track) track.style.display = "";
// si la clase asignada al elemento tiene como valor display:none;
// asignandole un string vacio vuelve a ocultar el elemento;
track = document.getElementById(id);
track.style.display = "block";
}

otra forma mas sencilla que la anterior, no lo se . solo para proposito de conocimiento, hay multiples formas de hacer lo mismo pero por diferentes caminos pero siempre depende de cual es la finalidad que se quiere lograr. la forma que tu lo estabas pensando era capturar todos los elementos que comparten una similaridad, recorrer por todos ellos y ocultarlos, al final mostrar especificamente uno. se puede hacer, pero yo pienso que el paso de recorrer los elementos una y otra vez esta de mas.

[Xabu]

Me casaria contigo (L)

Muchisimas gracias, mi problema esta resuelto gracias a una gran explicacion, de la que he aprendido y no hecho copy & paste xDDD

Tienes razon, ocultando solo el ultimo div abierto, recogido en la variable track (catalogo en mi caso actual) evito tener que cerrar TODOS los divs xP En cuanto a lo de la class="" y el id="" pues tambien comprendi un poco mas el uso de estos XD Soy algo nuevo en la materia como podras comprobar.

Ahora puedo seguir y terminar la web. Quizas vuelva a consultaros alguna que otra vez, a ver si en un futuro puedo ser yo quien ayude XDD

[zerokilled]

¡animate! me alegro que hayas aprendido los conceptos. por si te sirve como referencia, http://www.librosweb.es/