Estoy tratando de hacer un indicador de progreso y un mensaje de error. Inicialmente configuré style="display: none;" atributos Me gustaría cambiarlo a style="display: block;" con JS, pero mi código no tiene efecto. ¿Podrías ayudarme, qué me estoy perdiendo?
parte HTML:
<div class="loader" id="loading-indicator" style="display: none;"></div> <div class="error-message" id="error-message" style="display: none;"> An error has occured </div>Parte JS:
export const initForm = () =>{ const displayLoadingIndicator = document.getElementById('loading-indicator'); const errorMessage = document.getElementById('error-message') document.getElementById('submit-button').addEventListener('click', async eventObjeckt =>{ const country = document.querySelector('#country-name').value; console.log("CHECKPOINT 4: submit button was pushed"); console.log(`CHECKPOINT 3: ${country}`); eventObjeckt.preventDefault(); // loadingIndicator START displayLoadingIndicator.style.display = "block"; console.log("After setting displayLoadingIndicator.style.display to 'block' : ", displayLoadingIndicator) try{ getData(country) }catch(e){ errorMessage.style.display = 'block'; } displayLoadingIndicator.style.display = "none"; console.log("After setting back to displayLoadingIndicator.style.display to 'none': ", displayLoadingIndicator) // loadingIndicator END })Yo console.log-ed los elementos HTML antes y después de los comandos .style.display = 'block', pero todos se ven así:
<div class="loader" id="loading-indicator" style="display: none;"></div>entonces el .style.display = "block"; no surtió efecto.
Gracias
Las funciones de JavaScript están bloqueando y console.log es perezoso para evaluar objetos .
Lo configuras para block , luego se ejecuta un poco de JavaScript, luego lo configuras de nuevo para none . En ese momento, no se vuelve a pintar la pantalla (porque JS la bloquea) y, cuando cualquiera de las declaraciones de console.log mira el elemento, vuelve a none .
Si getData(country) es una operación que consume mucho tiempo, considere la posibilidad de enviarla a un trabajador web y establecer block cuando el trabajador web envíe un mensaje al proceso principal de que ha terminado de hacer el trabajo. MDN tiene un tutorial sobre trabajadores web .