problema con superposición de capas

[aniMAYtions]

Hola amig@s!!

Tengo un problema con una función javascript que se supone debería ocultarme una capa y mostrarme otra que tengo superpuesta. Pero no lo hace y no entiendo por qué, a ver si podeis aiudarme.
Las capas las imprimo con php de la siguiente forma

Código PHP:

  echo" 
        <div id='logueo' align='center'> 
            <div id='login'> 
                <fieldset> 
                <form name='fidentifica' method = 'post' action = './Index.php'> 
                <table> 
                    <tr> 
                        <td><span class='login'><span class='username'><input type='text' name='user' id='user' value='Nombre de usuario' onClick='javascript:vaciaInput();'/></span></span></td> 
                        <td>&nbsp;</td> 
                    </tr> 
                    <tr> 
                        <td><span class='login'><span class='password'><input type='password' name='pss' value=''/></span></span></td> 
                        <td><span class='login'><input type='submit' name='bslogin' value='' class='botonlogin' title='Enviar'/></span></td>                     
                    </tr> 
                    <tr> 
                        <td colspan = '2'> 
                            <span class='login'> 
                                <a href='#'><span class='lostpassword' title='No recuerdas tu clave?'></span></a><a href='#'><span class='lostusername' title='No recuerdas tu usuario?'></span></a><a href='#'><span class='registration' title='Crear una cuenta nueva'></span></a> 
                            </span> 
                        </td> 
                    </tr> 
                </table> 
                </form> 
                </fieldset> 
            </div> 
         
            <div id='logout'> 
                <fieldset> 
                <form name='flogout' action='./Index.php' method='post'> 
                <table> 
                    <tr> 
                        <td><span class='login'><span class='texto-login'>Hola "; 
                        if(isset($_SESSION['usuario'])) 
                            echo $_SESSION['usuario']; 
                            echo"</span></span></td> 
                        <td><span class='login'><input type='submit' name='bslogin' value='' class='botonlogout' title='Enviar'/></span></td>                     
                    </tr>             
                </table> 
                </form> 
                </fieldset> 
            </div> 
        </div>  
   

Es un módulo de logueo. Al hacer click en el botón de login se recogen los datos en el Index.php, se comprueba si es correcta la información de logueo y si es así se iama a una función javascript

Código PHP:

  if(isset($bslogin)) 
{ 
    $usu = $_POST['user']; 
    $pss = $_POST['pss']; 
    if(login($usu, $pss)) 
    { 
        echo"<script languaje='text/javascript'> 
        cambiaDiv(); 
        </script>"; 
    } 
}  
   

Código Javascript:

function cambiaDiv()
{
    alert('entro');
    document.getElementById("login").style.visibility = 'hidden';
    document.getElementById("logout").style.visibility = 'visible';
};
 

Veis el alert? pues lo hace.

Esto último, la función javascript la he cambiado de varias maneras; así como la veis, poniendo que siga ocultándome la capa principal pero que la que está detrás cambie la clase y ahora tenga otra con z-index superior a la primera.
Y nada. Lo primero de todo es que no me oculta la primera capa(login), es más,la consola de errores de firefox me dice que document.getElementById("login") is null y lo mismo de logout.

Otra cosa a tener en cuenta, el código css de logueo, login y logout es el siguiente

Código CSS:

#logueo
{
    position:relative;
    margin-top:20px;
    text-align:center;
}
 
#logueo #login
{
    position:absolute;
    z-index:2;
    top:20px;
    left:10px;
}
 
#logueo #logout
{
    position:absolute;
    z-index:1;
    top:20px;
    left:10px;
    
}
 

Gracias!!

[zerokilled]

no entiendo algo a menos que sean caprichos. ¿por que no muestras el DIV segun si el usuario se ha logeado con exito o no pero manejandolo desde php? si quieres hacerlo como lo presentas, asegurate que el codigo javascript se interprete luego de que ambos DIVs esten creados. la unica forma que conozco para que devuelva null con getElementById es si al momento de invocar la funcion no existe un elemento con el ID indicado.

[aniMAYtions]

Iniciado por zerokilled

no entiendo algo a menos que sean caprichos. ¿por que no muestras el DIV segun si el usuario se ha logeado con exito o no pero manejandolo desde php? si quieres hacerlo como lo presentas, asegurate que el codigo javascript se interprete luego de que ambos DIVs esten creados. la unica forma que conozco para que devuelva null con getElementById es si al momento de invocar la funcion no existe un elemento con el ID indicado.

Si no lo hago desde php es por no tener que repetir todo lo que hay antes de ese div(ese div va dentro de otro div con otro contenido que a su vez esta dentro de otro div). Además, ahora lo hago con javascript, más adelante podría hacerlo con ajax.

La función javascript es iamada después de pulsar el botón de login, así que se supone que los elementos ia han sido cargados.
Pero ahora que lo dices, hablamos de un formulario que recarga la página al pulsar en el submit y esto puede hacer que no se haian cargado de nuevo los elementos antes de iamar a la función... voy a ver si hay forma humana de corregir ésto.

Gracias!!

[aniMAYtions]

Verás, he probado hacer lo que me dijiste y ha dado resultado.

Cuando el usuario se loguea primero cargo el div y luego iamo a la función. He alargado el código en el index pero ahora mismo no se me ocurre una forma más sencilla.

Código PHP:

  if(isset($action)) 
{ 
    if($action == 'cierraSesion') 
       { 
        cargaInicioLeft(''); 
            $action($_SESSION['usuario']); 
    } 
} 
else if(isset($bslogin)) 
{ 
    $usu = $_POST['user']; 
    $pss = $_POST['pss']; 
    if(login($usu, $pss)) 
    { 
        cargaInicioLeft($_SESSION['usuario']); 
        echo"<script languaje='text/javascript'> 
        cambiaDiv(); 
        </script>"; 
    } 
    else 
    { 
        cargaInicioLeft(''); 
    } 
} 
else 
{ 
    if(isset($_SESSION['usuario'])) 
            cargaInicioLeft($_SESSION['usuario']); 
    else 
        cargaInicioLeft(''); 
}  
   

Gracias de nuevo!!