Hola de nuevo, estoy haciendo un página en la que según se van eligiendo opciones van desapareciendo una capa y cargando otra. No quiero que en ningún momento se recargue la página web para que todo sea más fluido.
La idea que se me ha ocurrido es usar el display de CSS para ir activandolo y desactivandolo según sea necesario. Aqui tenemos un eemplo con tres capas que se tienen que ir activando sucesivamente.
Código HTML:
<div id="marco_1" name="marco" draggable="true">
<div style="display:">
<input type="button" name="introducirLink" value="Introduce la dirección de la foto"/>
</div>
<div id="introducirLinkAlt" style="display:none">
<input type="text" size="35" id="enlazarfoto" name="enlazarfoto">
<input type="button" name="botonAceptar" id="botonAceptar" value="Aceptar">
<input type="button" name="botonCancelar" id="botonCancelar" value="Cancelar">
</div>
<div id="foto_1" style="display:none">
<img src="" width="450px" height="250px">
</div>
</div>
Todo funciona bien, salvo cuando el usuario pincha el botón cancelar que en ese caso, aunque sí que hace desaparecer la capa activa en ese momento no me hace aparecer la capa original, la que ve el usuario al cargar la página y no entiendo porque. La única teoría es que al haber pinchado en el input button este haya desaparecido pero no tiene ningún sentido. ¿Alguien sabe donde falla lo que estoy haciendo o si hay alguna manera mejor de hacer lo que pretendo?
Este es el script que no funciona:
Código HTML:
function cancelarenlace(){
var divPadre = this.parentNode;
var divMarco = divPadre.parentNode;
var divAlt = divMarco.getElementsByTagName('div');
divAlt[1].style.display = "none"
divAlt[0].style.display = ""
}