salida de javascript desapareciendo

 function init(){
    var flag=true;
    if(flag)
    {
        document.getElementById("panel").innerHTML=
            "power is on<br />";
    }
    if(7<2)
    {
        document.getElementById("panel").innerHTML=
            "<br />failure";
    }
        if(2<7)
    {
        document.getElementById("panel").innerHTML=
            "<br />success";
    }
}
window.onload=init;

este es if.js lo cargo en otro archivo html, pero este es el código principal que se ejecuta.

el único resultado que obtengo es "éxito" escrito pero "encendido" no aparece ¿qué está mal?

preguntado el 04 de julio de 12 a las 08:07

Tu segunda llamada a document.getElementById("panel").innerHTML= reemplaza el contenido del primero. -

6 Respuestas

No asigne HTML interno en varios lugares, cree una cadena y asígnela de una vez.

var flag = true,
    html = "";
if (flag) {
    html += "power is on<br />";
}
if (7 < 2) {
    html += "<br />failure";
}
if (2 < 7) {
    html += "<br />success";
}
document.getElementById("panel").innerHTML = html;

Respondido 04 Jul 12, 09:07

Está reemplazando el HTML actual allí, debería usar += en lugar de =.

function init(){
var flag=true;
if(flag)
{
    document.getElementById("panel").innerHTML +=
        "power is on<br />";
}
if(7<2)
{
    document.getElementById("panel").innerHTML +=
        "<br />failure";
}
    if(2<7)
{
    document.getElementById("panel").innerHTML +=
        "<br />success";
}

¿Cómo funciona esto para ti?

Respondido 04 Jul 12, 08:07

Creo que el usuario lo rechazó y señaló correctamente que las cadenas deben calcularse una vez antes de agregarlas a través de innerHTML. De todos modos, en este caso específico, creo que es más importante mostrar y explicar al usuario por qué se han eliminado las cadenas anteriores, así que +1 para mí: Fabricio Calderan

Sí, probablemente por eso me rechazaron, y tenían razón, es mejor construir la cadena y luego asignarla de una sola vez. Pero esto mostró por qué su texto no aparecía como esperaba de todos modos. - Edd Slipszenko

Fijar innerHTML de un elemento reemplaza cualquiera que sea el contenido que tenía previamente con la cadena HTML dada. Entonces, lo que sucede es que "el poder está encendido" es visible por un instante (las computadoras son realmente rápidas en estos días) y luego se reemplaza inmediatamente con "éxito".

Respondido 04 Jul 12, 08:07

  var panel =  document.getElementById("panel");
    if(flag) {
        panel.innerHTML += "power is on<br />";
    }

    if(7<2) {
        panel.innerHTML += "<br />failure";
    }
    if(2<7) {
        panel.innerHTML += "<br />success";
    }

cada vez que cambias el innerHTML sobrescribe todo el contenido anterior, por lo que debe agregar la cadena con +=.

Tal vez desee crear también una referencia al elemento del panel solo una vez.

Violín de ejemplo: http://jsfiddle.net/ypznU/

Respondido 04 Jul 12, 09:07

+= innerHTML, ¿Necesito decir mas? - Esailija

@Esailija sí: ¿qué tiene de malo? :) Espero que esto no se deba a una cuestión de microoptimización al agregar dos cadenas (incluso si tiene toda la razón en esto). - Fabricio Calderan

+1, y Esailja significa que innerHTML obliga a DOM a volver a dibujar todo, por lo tanto, debe usarlo lo mínimo posible: usuario1432124

@Random según el navegador, un ciclo simple puede ejecutarse durante 6 minutos usando += innerHTML vs unos pocos milisegundos si usa una cadena de búfer. No se trata de += con cadenas, se trata de += específicamente con innerHTML, lo que significa serializar DOM y volver a analizar el HTML constantemente, lo cual es muy, muy costoso. - Esailija

Puedes usar else if en lugar de if

function init(){
    var flag=true;
    if(flag)
    {
        document.getElementById("panel").innerHTML=
            "power is on<br />";
    }
    else if(7<2)
    {
        document.getElementById("panel").innerHTML=
            "<br />failure";
    }
        else if(2<7)
    {
        document.getElementById("panel").innerHTML=
            "<br />success";
    }
}
window.onload=init;

Tenga en cuenta que el código anterior siempre muestra "encendido" porque en su método asigna un indicador como verdadero, si desea una salida múltiple, puede usar el enfoque de concatenación como se sugiere.

Respondido 04 Jul 12, 09:07

La última declaración if siempre se evaluará como verdadera.

if(2<7)
{
    document.getElementById("panel").innerHTML=
        "<br />success";
}

Esto significa que el "éxito" siempre reemplazará lo que esté dentro del elemento del panel. Asegúrate de que tu condicional sea realmente lo que quieres y que reemplazar sea realmente lo que pretendías. De lo contrario, agregue la cadena como otros han sugerido.

Respondido 04 Jul 12, 09:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.