0

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:

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

1 respuesta 1

0

¡Bienvenido a SO en español Triplex!

Recuerda como funciona la propiedad de css para display, la propiedad puede contener alguno de los valores que indica la documentación. Por lo tanto usar display:'' no te va a servir para darle visibilidad al elemento, debes de usar algún otro valor como block.

También si quieres tratar de emular un atraso no te recomiendo que hagas bucles largos como ese for que tienes ahí ya que esto bloqueará tu página y hará que no responda durante el tiempo que el bucle esté corriendo; para estas funcionalidades hecha un ojo a funciones como setTimeout.

Tomando en cuenta la corrección y la recomendación me tomé la molestia de editar tu código de la siguiente manera:

const TIMEOUT_SEGUNDOS = 1;

function respuesta(a) {

  var div = document.getElementById(a);
  
  if (div.style.display == 'none') {
     div.style.display = 'block';
    document.getElementById('texto').value = "¿Es visible?";
  }
  
  if (div.style.display == 'block') {
    setTimeout(()=>{
        div.style.display = 'none';
        document.getElementById('texto').value = "Tiempo!!";
    }, TIMEOUT_SEGUNDOS*1000);

  }
}
<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:block;
 border-radius: 4px; width:auto;
 margin:2px; padding:16px;
 background-color:#50ff50; font-size: 16px;">
    <span>Mensaje a ocultar</span>
  </div>
</body>

Cabe recalcar que tu función no sabe diferenciar entre elementos, entonces hará que los elementos que estén ocultos automáticamente se vuelvan a esconder después de que pase el tiempo de espera.

3
  • 1
    Sí, correcto Fran, gracias también por la bienvenida. Realmente notaba que al presionar el botón, cuando corría el bucle, este tardaba en hacer su animación de botón. Imaginé que me estaba "ralentizando" el resto del proceso. Estoy estudiando HTML en sololearn.com y realmente no comienzo aún el de javascript. He consultado en Google para, a fuerza de prueba y error, agregar js a mi proyecto HTML :-) Creo que tu arreglo me sirve perfecto. Cuando necesite otro que diferencie entre elementos, lo estudiaré también. Gracias nuevamente @FranAcuna
    – Triplex
    Commented el 5 oct. 2021 a las 10:57
  • Así es, no es una ralentización en sí, si no más bien como una pausa que haces. JS es un lenguaje de un único hilo, por lo tanto al hacer ese tipo de bucles pausas todo el hilo hasta que se complete. Mucha suerte, yo también aprendí solo y con cursitos y me ha ido muy bien profesionalmente. Vas muy bien!
    – FranAcuna
    Commented el 5 oct. 2021 a las 19:40
  • Gracias @FranAcuna , por el ánimo, también necesitaba esa aclaración: JS es de un único hilo. Listo! guardado en mi memoria.
    – Triplex
    Commented el 5 oct. 2021 a las 20:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.