Skip to main content
Snippet para reproducción del problema. Eliminación del formato de cita para texto que no es una cita.
Origen Enlace
FranAcuna
  • 4.1k
  • 1
  • 8
  • 20

El problema es que al agregar el código para mostrar el div: div.style.display = ''; este no muestra el div rojo. Lo he desactivado dejándolo solo para que se vea su posición en el código siguiente:

El problema es que al agregar el código para mostrar el div: div.style.display = ''; este no muestra el div rojo. Lo he desactivado dejándolo solo para que se vea su posición en el código siguiente:

  <title>Temporizador por bucle While</title>

    <script>
    function respuesta(a) {
        var div = document.getElementById(a);
        if(div.style.display == 'none') {
         //  div.style.display = ''; ←Esta es la línea que inicia el bug
           document.getElementById('texto').value = "¿Es visible?";
        } 
        if(div.style.display == '') {
            let i = 140000000;
            while (i) { i--; };
            div.style.display = 'none';
document.getElementById('texto').value = "Tiempo!!";
        }
    }
    </script>

function respuesta(a) {
  var div = document.getElementById(a);
  if (div.style.display == 'none') {
    //  div.style.display = ''; ←Esta es la línea que inicia el bug
    document.getElementById('texto').value = "¿Es visible?";
  }
  if (div.style.display == '') {
    let i = 140000000;
    while (i) {
      i--;
    };
    div.style.display = 'none';
    document.getElementById('texto').value = "Tiempo!!";
  }
}
<body>
  <!-- Para visualizar el funcionamiento -->
  <input type="text" id="texto" value="" />
  <br />
  <input type="button" value="Mostrar y ocultar R" onClick="javascript:respuesta('ocultoR');" />
  <input type="button" value="Ocultar Green" onClick="javascript:respuesta('ocultoG');" />
  <br /><br />

  <!-- Mensajes tipo div -->
  <!-- Rojo -->
  <div id="ocultoR" style="display:none;
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#fb4b4b; font-size: 16px;">
    <span>Mensaje oculto</span>
  </div>
  <br />

  <!-- Verde -->
  <div id="ocultoG" style="display:'';
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#50ff50; font-size: 16px;">
    <span>Mensaje a ocultar</span>
  </div>
</body>

Sumé una entrada de texto para ver los resultados:

 

<body>
    <!-- Para visualizar el funcionamiento -->
    <input type="text" id="texto" value=""/>
    <br />
    <input type="button" value="Mostrar y ocultar R"
 onClick="javascript:respuesta('ocultoR');" />
    <input type="button" value="Ocultar Green"
 onClick="javascript:respuesta('ocultoG');" />
      <br /><br />

    <!-- Mensajes tipo div -->
    <!-- Rojo -->
    <div id="ocultoR" style="display:none;
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#fb4b4b; font-size: 16px;">
    <span>Mensaje oculto</span>
      </div>
      <br />

    <!-- Verde -->
    <div id="ocultoG" style="display:'';
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#50ff50; font-size: 16px;">
    <span>Mensaje a ocultar</span>
      </div>
</body>

Sumé una entrada de texto para ver los resultados:

El problema es que al agregar el código para mostrar el div: div.style.display = ''; este no muestra el div rojo. Lo he desactivado dejándolo solo para que se vea su posición en el código siguiente:

  <title>Temporizador por bucle While</title>

    <script>
    function respuesta(a) {
        var div = document.getElementById(a);
        if(div.style.display == 'none') {
         //  div.style.display = ''; ←Esta es la línea que inicia el bug
           document.getElementById('texto').value = "¿Es visible?";
        } 
        if(div.style.display == '') {
            let i = 140000000;
            while (i) { i--; };
            div.style.display = 'none';
document.getElementById('texto').value = "Tiempo!!";
        }
    }
    </script>

Sumé una entrada de texto para ver los resultados:

<body>
    <!-- Para visualizar el funcionamiento -->
    <input type="text" id="texto" value=""/>
    <br />
    <input type="button" value="Mostrar y ocultar R"
 onClick="javascript:respuesta('ocultoR');" />
    <input type="button" value="Ocultar Green"
 onClick="javascript:respuesta('ocultoG');" />
      <br /><br />

    <!-- Mensajes tipo div -->
    <!-- Rojo -->
    <div id="ocultoR" style="display:none;
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#fb4b4b; font-size: 16px;">
    <span>Mensaje oculto</span>
      </div>
      <br />

    <!-- Verde -->
    <div id="ocultoG" style="display:'';
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#50ff50; font-size: 16px;">
    <span>Mensaje a ocultar</span>
      </div>
</body>

El problema es que al agregar el código para mostrar el div: div.style.display = ''; este no muestra el div rojo. Lo he desactivado dejándolo solo para que se vea su posición en el código siguiente:

function respuesta(a) {
  var div = document.getElementById(a);
  if (div.style.display == 'none') {
    //  div.style.display = ''; ←Esta es la línea que inicia el bug
    document.getElementById('texto').value = "¿Es visible?";
  }
  if (div.style.display == '') {
    let i = 140000000;
    while (i) {
      i--;
    };
    div.style.display = 'none';
    document.getElementById('texto').value = "Tiempo!!";
  }
}
<body>
  <!-- Para visualizar el funcionamiento -->
  <input type="text" id="texto" value="" />
  <br />
  <input type="button" value="Mostrar y ocultar R" onClick="javascript:respuesta('ocultoR');" />
  <input type="button" value="Ocultar Green" onClick="javascript:respuesta('ocultoG');" />
  <br /><br />

  <!-- Mensajes tipo div -->
  <!-- Rojo -->
  <div id="ocultoR" style="display:none;
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#fb4b4b; font-size: 16px;">
    <span>Mensaje oculto</span>
  </div>
  <br />

  <!-- Verde -->
  <div id="ocultoG" style="display:'';
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#50ff50; font-size: 16px;">
    <span>Mensaje a ocultar</span>
  </div>
</body>
 

Sumé una entrada de texto para ver los resultados:

Origen Enlace

Crear temporizador javascript que al presionar un botón, pasará la 'id' del elemento a mostrar primeramente, luego del tiempo fijado, este se oculte

El problema es que al agregar el código para mostrar el div: div.style.display = ''; este no muestra el div rojo. Lo he desactivado dejándolo solo para que se vea su posición en el código siguiente:

  <title>Temporizador por bucle While</title>

    <script>
    function respuesta(a) {
        var div = document.getElementById(a);
        if(div.style.display == 'none') {
         //  div.style.display = ''; ←Esta es la línea que inicia el bug
           document.getElementById('texto').value = "¿Es visible?";
        } 
        if(div.style.display == '') {
            let i = 140000000;
            while (i) { i--; };
            div.style.display = 'none';
document.getElementById('texto').value = "Tiempo!!";
        }
    }
    </script>

Sumé una entrada de texto para ver los resultados:

<body>
    <!-- Para visualizar el funcionamiento -->
    <input type="text" id="texto" value=""/>
    <br />
    <input type="button" value="Mostrar y ocultar R"
 onClick="javascript:respuesta('ocultoR');" />
    <input type="button" value="Ocultar Green"
 onClick="javascript:respuesta('ocultoG');" />
      <br /><br />

    <!-- Mensajes tipo div -->
    <!-- Rojo -->
    <div id="ocultoR" style="display:none;
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#fb4b4b; font-size: 16px;">
    <span>Mensaje oculto</span>
      </div>
      <br />

    <!-- Verde -->
    <div id="ocultoG" style="display:'';
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#50ff50; font-size: 16px;">
    <span>Mensaje a ocultar</span>
      </div>
</body>

Notas complementarias: Funciona perfectamente para ocultar div's visibles, pero deseo mostrarlos para luego ocultarlos.