Con
block funciona perfecto ¿en qué navegador no te deja visible el botón?.
Pero yendo a tu código, y más especificamente: mira por ti mismo como se van separando los grupos para mostrar u ocultar cada nivel de DOM.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
var marcos, entradaEnlaces, botonAceptar, botonCancelar;
window.onload = function (){
marcos = document.getElementsByName('marco');
entradaEnlaces = document.getElementsByName('introducirLink');
botonAceptar = document.getElementsByName('botonAceptar');
botonCancelar = document.getElementsByName('botonCancelar');
for(var i=0; i<entradaEnlaces.length; i++){
entradaEnlaces[i].onclick = introducirDireccion;
}
for(var i=0; i<botonAceptar.length; i++){
botonAceptar[i].onclick = aceptarenlace;
}
for(var i=0; i<botonCancelar.length; i++){
botonCancelar[i].onclick = cancelarenlace
}
}
function introducirDireccion(){
var divPadre = this.parentNode;
var divHijo = this; //??!!
var divMarco = divPadre.parentNode;
var divAlt = divMarco.getElementsByTagName('div');
cambiarDisplayNodos(divHijo, divAlt[1])
}
//funcion que hace el nodo1 invisible y el nodo 2 visible
function cambiarDisplayNodos(nodo1,nodo2){
alert("nodo1.innerHTML»\r\n" +nodo1.innerHTML);
alert("nodo2.innerHTML»\r\n" +nodo2.innerHTML);
if(nodo2.style.display == "none"){
nodo2.style.display = "block"
nodo1.style.display = "none"
}
}
function aceptarenlace(){
var direccionFoto = document.getElementById('enlazarfoto').value;
var divPadre = this.parentNode;
var divMarco = divPadre.parentNode;
var divAlt = divMarco.getElementsByTagName('div');
var divImg = divAlt[2].getElementsByTagName('img');
var comienzoDireccion = direccionFoto.substring(0,7)
if(comienzoDireccion.toLowerCase() != "http://"){
alert("No has introducido una dirección valida. Asegurate que comience por http://")
}
else {
divImg[0].src = direccionFoto
cambiarDisplayNodos(divAlt[1],divAlt[2]);
}
}
function cancelarenlace(){
var divPadre = this.parentNode; alert("divPadre.innerHTML»\r\n" +divPadre.innerHTML)
var divMarco = divPadre.parentNode; alert("divMarco.innerHTML»\r\n" +divMarco.innerHTML)
var divAlt = divMarco.getElementsByTagName('div');
alert("divAlt[1].innerHTML»\r\n" +divAlt[1].innerHTML)
alert("divAlt[0].innerHTML»\r\n" +divAlt[0].innerHTML)
divAlt[1].style.display = "none"
divAlt[0].style.display = "block"
}
function validarURL(url) {
var re=/^http:\/\/\w+(\.\w+)*\.\w{2,3}$/;
return re.test(url);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<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>
</body>
</html>
No le estás pasando el
this.
Y en mi ejemplo te lo mostré.
Vas a tener que referenciarlo de alguna manera.
Descomenta el
style="display:none" en
introducirLinkAlt después de ver lo que ocurre en cada vuelta del escript (ya no vas a empezar directamente con el botón de cancelar), y mira la diferencia luego de recargar.
No es un mal trabajo. Para nada.