Misterios del DOM

[donfalcone]

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!

[caricatos]

Hola:

Te has fijado en la consola de errores de mozilla... de haber alguno lo indicaría. De todos modos el tercer parámetro de addEventListener creo que es mejor que sea false... te paso unos alias que yo uso habitualmente:

Código:

function tag(id)	{return document.getElementById(id);}
function crear(e)	{return document.createElement(e);}
function texto(t)	{return document.createTextNode(t);}
function insEvent(elemento, ev, f)	{
	if (window.addEventListener)	elemento.addEventListener(ev, f, false)
	else				elemento.attachEvent("on" + ev, f);
}

Funcionan en los 4 navegadores que he probado.

Por cierto, cuando postees tus códigos trata de resumirlos porque tantas líneas se hace difícil para leer.

Saludos

[venkman]

El "misterio" es bastante simple y no tiene que ver con el DOM.

El problema es este:

Código:

function saludar(mensaje) {
    alert(mensaje);
    saludar = 7;
}
saludar("hola");
saludar("hola");

Si pruebas ese código verás que la primera llamada funciona y la segunda se queja de que saludar no es una función. ¿Por qué? Porque dentro hemos asignado otra cosa distinta a saludar.

En tu código ocurre lo mismo:

Código:

 function pq() {
    //...
    pq = document.getElementById("pq");
    //...
}

Soluciones:

• No usar los mismos nombres para cosas distintas
• Cuando quieras usar una variable local, declárala como variable local (var pq = ...)
• Limpia tu código más, porque en este caso ni siquiera es necesaria esa variable. El elemento pq ya se lo estás pasando a la función al llamarla con pq(this):
  
  Código:

  function pq(elemento) {
      //...
      if(navigator.appName != "Microsoft Internet Explorer"){
          elemento.style.color = '#FF3300';
      }
      //...
  }
  

• Limpia tu código más aún. No necesitas 4 funciones distintas cuando las cuatro hacen lo mismo. Parametriza lo que sea distinto y usa una única función.

[donfalcone]

Gracias Caricatos y Venkman,

Voy a intentar hacer lo que me comentáis.
Os comento el resultado, ya que no estoy muy seguro si seré capaz de hacerlo.

Lo siento por lo de la longitud del código, no veía por donde resumirlo.

Intentaré sintetizarlo, pero me va a costar.
Seguramente os tendré que volver a preguntar.

[TRES HORAS MÁS TARDE]
Logré sintetizar el código y todo funciona perfectamente excepto la función que tendría que 'cerrar' el párrafo.

Código PHP:

  function insEvent(elemento, ev, f){
        if (window.addEventListener){
                elemento.addEventListener(ev, f, false)
        }else{
                elemento.attachEvent("on" + ev, f);
}}

function cerrar(){
a = document.getElementById('e1');
a.parentNode.removeChild(a);
}

function q(node,txt){
var par = crear(node);
var contenido = texto(txt);
par.appendChild(contenido);
par.id = 'e1';
ant = tag('nav');
ant.appendChild(par);
var bot = crear('button');
var valor = texto('cerrar');
bot.appendChild(valor);
par.appendChild(bot);
estilo(par,bot);
insEvent(bot, click, cerrar);
} 
   

?Qué me estoy dejando?

Gracias de nuevo.

Saludos!

[venkman]

insEvent(bot, "click", cerrar);

[donfalcone]

Hola,

Gracias por vuestra ayuda Caricatos y Venkman, vuestros consejos me fueron de gran ayuda.

Pero ahora me surgio otra duda.
Estoy intentando incluir un formulario en una de estas expiclaciones DOM que se desplagan al clickar.
El problema es que no consigo incluir más de un elemento en el cuestionario.

Aquí os paso el código:

Código PHP:

  function formulario(t,info){
var par = crear('span');
var contenido = texto(info);
par.appendChild(contenido);
var par1 = crear(t);
par1.type = 'text';
par.appendChild(par1);
par.id = 'ct';
ant = tag('e1');
ant.appendChild(par);
}
 
function cnt(){
var form = crear('form');
form.name = 'contacto';
form.appendChild(formulario('input','Nombre '));
form.appendChild(formulario('input','Tema '));
} 
   

Por ejemplo, en este caso sólo aparece un campo input 'text', el primero. (Nombre)

Gracias y saludos!

[caricatos]

Hola:

Si lo que quieres es usar form.appendChild(_ALGO_), ese algo debe existir, pero tu función formulario no devuelve nada (te faltaría poner return par;)... además ese tag par lo añades a un tag("e1"), pero repites el id que no debe repetirse...

Saludos

[donfalcone]

Hola Caricatos,

Gracias por tu respuesta. Pero no logro entender lo que tendría que hacer.
Puse el "return par;" al final pero tampoco me funcionó.
?Podrías ser un poco más concreto?

Perdón por mi inaptitud.

Saludos

[donfalcone]

Hola Caricatos!!

Ya está !! Después de un par de horas ( aun no soy el más rápido), lo logré.

Saludos!