Hola a tod@s!
El DOM me trae loco.
Pequeña introducción: Tengo cuatro tags en un html con una función identica cada uno, cuando se produce un click se llama a la función correspondiente.
Para mi sorpresa, a pesar de ser identicas, las dos primeras funcionan, las dos segundas no. Sólo pasa en Firefox, en IE funciona bien.
Aquí los scripts:
Código PHP:
<li id="que" onclick="return q(this)">Texto 1</li>
<li id="como" onclick="return c(this)">Texto 2</li>
<li id="pq" onclick="return pq(this)">Texto 3</li>
<li id="contacto" onclick="return ct(this)" >Texto 3</li>
Aquí el Javascript de una de las dos funciones que funcionan:
Código PHP:
function q(){
var hay = document.getElementById('e1');
if(hay == null){
if(navigator.appName != "Microsoft Internet Explorer"){
que = document.getElementById("que");
que.style.color = '#FF3300';
}
var p = document.createElement("p");
var texto = document.createTextNode("Explicacion 1.");
p.appendChild(texto);
p.id = 'e1';
p.style.color = 'blue';
p.style.backgroundColor = '#FFFF77';
p.style.border = 'solid #FF3300 1px';
p.style.padding = '1em';
p.style.marginRight = '10em';
p.style.fontSize = '11.5px';
p.style.lineHeight = '1.5em';
var ant = document.getElementById('nav');
ant.appendChild(p);
var a = document.createElement("button");
var valor = document.createTextNode("Cerrar");
a.appendChild(valor);
a.style.border = '1px solid gray';
a.style.fontSize ='11px';
a.style.marginLeft = '85em';
if (navigator.appName == "Microsoft Internet Explorer"){
a.attachEvent("onclick", cerrar_e1);
}else{
a.addEventListener("click",cerrar_e1,true);
}
p.appendChild(a);
}if(hay!=null){
cerrar_e1();
}}
function cerrar_e1(){
a = document.getElementById('e1');
a.parentNode.removeChild(a);
if(navigator.appName != "Microsoft Internet Explorer"){
que.style.color = '#001212';
}}
Aquí el Javascript de una de las dos funciones que NO funcionan:
Código PHP:
function pq(){
var hay = document.getElementById('e3');
if(hay == null){
if(navigator.appName != "Microsoft Internet Explorer"){
pq = document.getElementById("pq");
pq.style.color = '#FF3300';
}
var p = document.createElement("p");
var texto = document.createTextNode("Explicacion 3");
p.appendChild(texto);
p.id = 'e3';
p.style.color = 'blue';
p.style.backgroundColor = '#FFFF77';
p.style.border = 'solid #FF3300 1px';
p.style.padding = '1em';
p.style.marginRight = '10em';
p.style.fontSize = '11.5px';
p.style.lineHeight = '1.5em';
var ant = document.getElementById('nav');
ant.appendChild(p);
var a = document.createElement("button");
var valor = document.createTextNode("Cerrar");
a.appendChild(valor);
a.style.border = '1px solid gray';
a.style.fontSize ='11px';
a.style.marginLeft = '85em';
if (navigator.appName == "Microsoft Internet Explorer"){
a.attachEvent("onclick", cerrar_e3);
}else{
a.addEventListener("click",cerrar_e3,true);
}
p.appendChild(a);
}if(hay!=null){
cerrar_e3();
}}
function cerrar_e3(){
a = document.getElementById('e3');
a.parentNode.removeChild(a);
if(navigator.appName != "Microsoft Internet Explorer"){
pq.style.color = '#001212';
}}
Cuando digo no funciona, lo que esta pasando es:
- No puedo cerrar 'e3' apretando otra vez al tag que acciona la función 'function c()'
- Una vez cerrado, ya no lo puedo volver a abrir.
Gracias por vuestra ayuda.
Saludos!