Problema compatibilidad funcion onclick firefox

[nacho2334]

Buenas, soy nuevo les pido me ayuden a solucionar esto que me tiene hace dias quemandome el bocho.
En chrome y opera se ve lo mas bien pero firefox e IE no.
Es un texto que al hacer click aparece otro al costado.
Aca les dejo el codigo Gracias

<div id="quienes" style="margin-top:20px; color:#333; cursor: pointer;" onmousemove="this.style.color='#4c4b4c'" onmouseout="this.style.color='#333'" onclick="quienesr.style.visibility='visible'; quer.style.visibility='hidden'; comor.style.visibility='hidden'" > TITULO QUE AL HACER CLICK APARECE TEXTO</div>
<div id="que" style="margin-top:20px; color:#333; cursor: pointer;" onmousemove="this.style.color='#4c4b4c'" onmouseout="this.style.color='#333'" onclick="quer.style.visibility='visible'; comor.style.visibility='hidden'; quienesr.style.visibility='hidden'"> TITULO QUE AL HACER CLICK APARECE TEXTO</div>
<div id="como" style="margin-top:20px; color:#333; cursor: pointer;" onmousemove="this.style.color='#4c4b4c'" onmouseout="this.style.color='#333'" onclick="comor.style.visibility='visible'; quienesr.style.visibility='hidden'; quer.style.visibility='hidden'"> TITULO QUE AL HACER CLICK APARECE TEXTO</div>

</div>
<div style="position:absolute; left:500px" ><hr style="width:1px; height:380px; margin-top:10px "/></div>
<div id="rig" style="float:right; width:400px; height:300px; margin-right:50px " >
<div id="quienesr" style="visibility:hidden; position:absolute; margin-top:80px; margin-right:150px; z-index:1"> ACA VA UN TEXTO
</div>
<div id="quer" style="visibility:hidden; position:absolute; margin-top:80px; margin-right:150px; z-index:2> ACA VA UN TEXTO
</div>
<div id="comor" style=" visibility:hidden; position:absolute; margin-top:80px; margin-right:150px; z-index:3"> ACA VA UN TEXTO
</div>
</div>
</div></div>

[Naahuel]

Ay ay ay, jaja. Entiendo que estás aprendiendo, paso a darte un par de consejos:

• El código que estás utilizando es algo que no se hace más, desde hace mucho tiempo. Todos esos atributos que colocás en linea son ilegibles, totalmente imposibles de mantener y muy antiguos. Imaginate si tu proyecto crece y tenés que cambiar algún comportamiento o color de estilo! te volvés mono.
• En lo respectivo a estilos, siempre usá CSS externo, con clases y IDs. Leé al respecto!
• Ídem a lo anterior para JavaScript. No uses javascript en lineas, te costará HORROROSAMENTE mantenerlo y crearlo.
• Hay cientos y cientos de cursos para aprender a hacer cosas con HTML+CSS+JAVASCRIPT. Buscá alguno que se adapte a tus conocimientos y expectativas y hacelo! Vas a ver que hay formas más eficientes de lograr lo que te proponés :)

Respecto a tu problema, sin embargo, el problema está en la forma en que intentás acceder el DOM. Para mayor compatibilidad, siempre utiliza .getElementById().

Te digo esto para que lo tengas en cuenta y aprendas, pero no te recomiendo que sigas con ese código si es que recién comenzaste el proyecto.

La primera parte de tu código funcionaría así:

Código HTML:

<div id="quienes" style="margin-top:20px; color:#333; cursor: pointer;" onmousemove="this.style.color='#4c4b4c'" onmouseout="this.style.color='#333'" onclick="document.getElementById('quienesr').style.visibility='visible'; document.getElementById('quer').style.visibility='hidden'; document.getElementById('comor').style.visibility='hidden'" > TITULO QUE AL HACER CLICK APARECE TEXTO</div>
<div id="que" style="margin-top:20px; color:#333; cursor: pointer;" onmousemove="this.style.color='#4c4b4c'" onmouseout="this.style.color='#333'" onclick="document.getElementById('quer').style.visibility='visible'; document.getElementById('comor').style.visibility='hidden'; document.getElementById('quienesr').style.visibility='hidden'"> TITULO QUE AL HACER CLICK APARECE TEXTO</div>
<div id="como" style="margin-top:20px; color:#333; cursor: pointer;" onmousemove="this.style.color='#4c4b4c'" onmouseout="this.style.color='#333'" onclick="document.getElementById('comor').style.visibility='visible'; document.getElementById('quienesr').style.visibility='hidden'; document.getElementById('quer').style.visibility='hidden'"> TITULO QUE AL HACER CLICK APARECE TEXTO</div>
 

Estudiá los cambios. En lugar de hacer:

Código Javascript:

quer.style.visibility='visible';
 

hacemos:

Código Javascript:

document.getElementById('quer').style.visibility='hidden';
 

Además fijate que en tu código también hay </div>'s que no cierran nada y comillas sin cerrar! eso también afecta.

[nacho2334]

jeje gracias nahuel,

Si se nota que soy novato, igual el css lo uso siempre externo pero esto lo hice así
porque me resulta mas rápido y al final del proyecto lo ordeno.

Todavía no probé lo que me aconsejaste, pero mi error estaba en creer que el evento onclick era html y lo trataba de resolver como tal.

Obviamente me voy a poner a leer mas sobre java me recomendás algo en especial?

[Naahuel]

Iniciado por nacho2334

jeje gracias nahuel,
Si se nota que soy novato, igual el css lo uso siempre externo pero esto lo hice así
porque me resulta mas rápido y al final del proyecto lo ordeno.

No hay problema :) Está muy bien. A medida que empieces a aprender y a practicar, aprenderás las mejores prácticas y vas a hacer códigos más eficientes.

Iniciado por nacho2334

Obviamente me voy a poner a leer mas sobre java me recomendás algo en especial?

¿Hablás inglés? Este tutorial me pareció excelente: http://code.google.com/edu/submissio...ss-javascript/

Está hecho por algunos desarrolladores de Chrome y Google. Aprendés bien para qué es cada cosa (HTML, CSS, JavaScript) y algunas buenas prácticas. Lamentablemente no está en español. Intenté buscar otro parecido pero no tuve éxito. Te dejo eso para vos :P

[nacho2334]

Si hablo, ya mismo me pongo a verlo, gracias otra vez