[SOLUCIONADO] 'Caché' en enlace onclick javascript

[El_Astur]

Buenas,

tengo un problema que no logro dar con la solución. Tengo un enlace javascript que oculta una capa, cuando se entra por primera vez con dar un solo click ya realiza la operación pero en cuanto se entra de nuevo hay que dar dos clicks al botón para que la realice. Este es mi código por si alguien puede ver una solución(la que da fallo es la MostrarOculta)r:

<li class="top type">
<a href="javascript:MostrarOcultar('hidden');" id="type" class="top_link">
<span class="down">buscar</span></a>
</li>
</ul>
<div class="cp_oculta" id="hidden" >
<input type="text" placeholder="Type your search" />
<button type="button" value="submit" onClick="javascript:closeThisDiv();"><img src="img/iconos/icerrar.png" /></button>
</div>

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">div.cp_oculta{display: none;}</style>');
function MostrarOcultar(capa,enlace){
if (document.getElementById)
{
var aux = document.getElementById(capa).style;
aux.display = aux.display? "":"block";
}

}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function closeThisDiv() { var openDiv = document.getElementById('hidden'); openDiv.style.display = 'none'; }
//]]>
</script>

Un saludo

[Alexis88]

Solo tenías que hacer un pequeño cambio en la forma en la que tomas e intentas cambiar el valor del atributo display en la función 'MostrarOcultar':

Código Javascript:

function MostrarOcultar(capa,enlace){ 
    var aux = document.getElementById(capa),
        display = aux.style.display; 
    aux.style.display = display == "block" ? "none" : "block"; 
}
 

Si te fijas, primero tomo al elemento a afectar, luego al valor de su propiedad display y luego hago la comparación y asignación de nuevo valor. Así es como debe de ser.

Saludos

[El_Astur]

Efectivamente Alexis, con ese cambio que me has comentado funciona a la perfección, muchas gracias!!!!

[El_Astur]

¿Y en un script como este se podría hacer lo mismo? pruebo lo de antes pero no funciona:

<script type="text/javascript">
//<![CDATA[
function capa()
{
var estilo = document.getElementById("capa").className;
if (estilo == "estilo1")
{
document.getElementById("capa").className = "estilo2";
}
else
{
document.getElementById("capa").className = "estilo1";
}
}
//]]>
</script>

Html
<div onclick="capa()"></div>

[Alexis88]

Un pequeño ejemplo:

Código HTML:

<div id = "capa" class = "estilo1"></div>
<label onclick = "capa()">Cambia</label>
 

Código CSS:

.estilo1{
    background: red;
}
 
.estilo2{
    background: green;
}
 

Código Javascript:

function capa(){
    var miCapa = document.getElementById("capa"),
        estilo = miCapa.className;
    if (estilo == "estilo1"){
        miCapa.className = "estilo2";
    }
    else{
        miCapa.className = "estilo1";
    }
}
 

Tengo una división de id 'capa' y clase 'estilo1', además de una etiqueta a la cual, al darle un clic, ejecuta la función 'capa'. En la hoja de estilos, tengo dos clases: estilo1 y estilo2. La primera, asigna un color rojo como fondo al elemento afectado, mientras que la segunda, asigna un color verde.

En la función, tomo al elemento de id 'capa' y a su clase, luego, si la clase que posee el elemento es 'estilo1', la cambio por 'estilo2' y viceversa.

DEMO

Saludos

[El_Astur]

Lo he probado y me sigue cacheando, ¿quizás pueda estar en conflicto con otros scripts? Es un botón que clickeo y abre un desplegable pero sigo teniendo que dar 2 click. ¿Y habría alguna manera de en vez de un id aplicar una clase que me sirviera para utilizar varias veces en un mismo archivo o diferentes? Es decir, tener varios desplegables y que funcionen todos tirando de esa función. Quizás aplicando document.getElementByClass?

Disculpa mi pesadez pero estoy aprendiendo con javascript y me surgen problemas que a pesar de buscar información y pegarme con ellos no logro solucionar.

[El_Astur]

Nada Alexis, lo he solucionado aunque me sigue cacheando y tengo que dar dos clicks para que abra el desplegable. Muchas gracias de nuevo por la ayuda!!!!