¿por qué no me funciona este script?

paskuini · #1 (**permalink**) 30/06/2009, 10:04

Bueno mi problema es éste... el script:

Código HTML:

<script>
function contra() {
if 
	(document.getElementById('contra').style.display='none') 
	{document.getElementById('contra').style.display='block';} 
else {
	if 
		(document.getElementById('contra').display='block')
		{document.getElementById('contra').display='none';}
}
}
</script>

no me funca... ¿sabriais decirme por qué? o en su defecto.. decirme otra manera de hacer lo siguiente:
Mi idea es hacer el típico menú que en un directorio contiene distintos subdirectorios los cuales "aparecen" o "desaparecen" según clicas sobre el menú..... no sé si me he explicado muy bien...

Gracias de antemano!

skatomundo · #2 (**permalink**) 30/06/2009, 12:46

Hola paskuini

Prueba esta manera:

Código PHP:

  <body>
    <div id="contra" style="display:inline">HOLA MUNDO!</div>
</body>

<input type="button" value="Ocultar/Ver Hola Mundo!" onclick="contra();" />
<script>
function contra()
{
    var tag_id = document.getElementById('contra');
    alert(tag_id.style.display);
    if (tag_id.style.display == 'none')
    {
        tag_id.style.display = 'inline';
    } 
    else
    {
        tag_id.style.display = 'none';
    }
}
</script>

saludos,

paskuini · #3 (**permalink**) 02/07/2009, 07:00

pues tampoco me va..... además, me he dado cuenta de que al tener muchas ID's que van a usar la misma función, y preferiria escribir 1 función en vez de 20. Se me ocurrió... ¿hay alguna manera de tomar las ID's como parámetros?

paskuini · #4 (**permalink**) 02/07/2009, 07:16

algo tipo esto...

Cita:

posman · #5 (**permalink**) 02/07/2009, 07:33

No se si se resuelva tu problema, pero en el codigo inicial que pusiste, en el if estas asignando un valor en lugar de compararlo. Para el if se utiliza == y no un solo =

Código:

...
if ( document.getElementById('contra').style.display == 'none' )
...

paskuini · #6 (**permalink**) 02/07/2009, 07:44

posman, en un principio lo tenia con '==' pero tampoco me funcionaba... muchas gracias por la información, de todas formas!

cehojac · #7 (**permalink**) 02/07/2009, 09:35

Puedes intentar asi

<script type="text javascript">
function contra(id) {
var id_estilo;
id_estilo = document.getEelementById(id).style.display

if (id_estilo=='none')
{id_estilo='block';}
else
{
if (id_estilo=='block')
{id_estilo='none';}
}
}
</script>

a ver si te funciona asi

paskuini · #8 (**permalink**) 02/07/2009, 09:59

pues sigue sin funcionar........ :( aunque a mi entender el código es correcto!... (pero, la verdad.. yo, de javascript... a penas se el nombre)

skatomundo · #9 (**permalink**) 02/07/2009, 10:11

Creo entender lo que deseas es un "mostrar/ocultar" de un único objeto o de cualquier objeto. Si son varios objetos deberás pasar el ID cada vez que haces el llamado a la función y verificar que el objeto esté con el estilo display en block o none, dependiendo de eso tu harás lo contrario.

paskuini · #10 (**permalink**) 02/07/2009, 10:18

lo que estoy haciendo es un menú que tiene unas categorias, por ejemplo:[carne],[pescado]y[fruta]; cada categoria tiene sus subcategorias [pollo],[lubina],[manzanas],etc.

En un principio sólo se muestran las categorias principales.
Lo que quiero es que al hacer click en [carne], me muestre: [pollo],[ternera],... y al hacer click de nuevo, lo oculte.

El menú es larguito, por eso intento hacerlo con una única función...

Vhan · #11 (**permalink**) 02/07/2009, 15:00

creo que ya vi el error (aparte de agregar los "==")... observa bien esto:

<script>
function contra() {
if
(document.getElementById('contra').style.display=' none')
{document.getElementById('contra').style.display=' block';}
else {
if
(document.getElementById('contra').display='block' )
{document.getElementById('contra').display='none'; }
}
}
</script>

en estas lineas el codigo es document.getElementById('contra').display
y deberia ser document.getElementById('contra').style.display

aqui el codigo:

Código:

function contra() {
if (document.getElementById('contra').style.display=='none') 
	{document.getElementById('contra').style.display='block';} 
if (document.getElementById('contra').style.display=='block')
	{document.getElementById('contra').style.display='none';}
}

lo mismo pero con la sentencia else y un par de alerts para verificar lo que hace:

Código:

function contra() {
if (document.getElementById('contra').style.display=='none') 
	{alert('displaynone'); document.getElementById('contra').style.display='block';} 
else{
	if (document.getElementById('contra').style.display=='block')
		{alert('displayblock'); document.getElementById('contra').style.display='none';}
}}

por otro lado, creo que las soluciones en post anteriores no funcionan, porque cambian el valor de la variable creada mas no del valor como tal del atributo.

espero funcione :)

paskuini · #12 (**permalink**) 06/07/2009, 06:48

muchas gracias por tu ayuda, Vhan..... pero esto tampoco me funca :( el "style.display" ya me di cuenta de que estaba mal y lo cambie.

Con lo de "==" no se si estaremos acertados, ya que cuando pruebo la funcion me funciona solo (abriendo, no cerrando) cuando hay un solo "="

paskuini · #13 (**permalink**) 06/07/2009, 07:14

se me acaba de ocurrir. ¿podria ser más sencillo usar javascript para cambiar directamente la clase de css? Es decir: si tengo dos clases exactamente iguales con la diferencia del display; una que sea #abierto y otra que sea #cerrado, puedo hacer un:
document.getElementById('id').class='abierto' ¿?

Vhan · #14 (**permalink**) 07/07/2009, 07:49

el problema es que cuando lo cierras (display= none) , ya no lo va a encontrar de nuevo para que reaparesca (a menos que uses un boton o algo...), y no lo va a poder abrir de nuevo...quizas para ocultarlo puedas hacer lo mismo pero cambiando el color del texto a.. blanco o algo asi jej...

GagleKas · #15 (**permalink**) 07/07/2009, 08:10

En lugar de display utiliza visibility "hidden" y "visible". No es lo mismo pero se parece, a ver si te funciona.

Cita:

Iniciado por Vhan

el problema es que cuando lo cierras (display= none) , ya no lo va a encontrar de nuevo para que reaparesca (a menos que uses un boton o algo...), y no lo va a poder abrir de nuevo...quizas para ocultarlo puedas hacer lo mismo pero cambiando el color del texto a.. blanco o algo asi jej...

Aunque no se muestre en la pantalla sigue existiendo y se puede acceder a el.

paskuini · #16 (**permalink**) 07/07/2009, 08:38

Cita:

Iniciado por Vhan

el problema es que cuando lo cierras (display= none) , ya no lo va a encontrar de nuevo para que reaparesca (a menos que uses un boton o algo...), y no lo va a poder abrir de nuevo...quizas para ocultarlo puedas hacer lo mismo pero cambiando el color del texto a.. blanco o algo asi jej...

Ése no puede ser el problema ya que el menú comienza estando CERRADO, el problema es, que cuando lo ABRO no puedo CERRARLO de nuevo

paskuini · #17 (**permalink**) 07/07/2009, 08:39

Cita:

Iniciado por GagleKas

En lugar de display utiliza visibility "hidden" y "visible". No es lo mismo pero se parece, a ver si te funciona.

No solo no es lo mismo si no que no es lo que busco... al fin y al cabo, lo que busco haciendo este menú es reducir espacio. Haciendo lo que dices lo unico que consigo es que no se vea, pero el espacio lo ocupa igual.

Vhan · #18 (**permalink**) 07/07/2009, 11:08

tienes razon...
quizas esta pagina ayude:
w w w.devx.com/tips/Tip/13638

paskuini · #19 (**permalink**) 08/07/2009, 08:03

Cita:

Iniciado por Vhan

tienes razon...
quizas esta pagina ayude:
w w w.devx.com/tips/Tip/13638

Vhan, te ¡ADORO! Muchas gracias :) ya lo he solucionado. Llevaba dos semanas con la misma mi**** Y es que tristemente, los pequeños errores con soluciones sencillas siempre son los que más tiempo nos hacen perder........

Dejo aqui cómo he dejado finalmente el código, por si le interesa a alguien más:

Código:

<script language="JavaScript" type="text/javascript">
<!--
function toggle(element){
	if (element.style.display=='none')
		{element.style.display='block';}
	else {element.style.display='none'}
}
//-->
</script>

...realmente me siento un poco estúpido viendo el código de 3 lineas que me ha dado tanta guerra..... parece que nunca seré el gran programador que soñaba hace años jajaja ^^' habrá que estudiar más.
A ponerse las pilas.