Soy nuevo en el aprendizaje de JavaScript y estoy tratando de abrir y luego cerrar un mensaje personalizado después de 3 segundos de aparecer, pero mi función no funciona. El mensaje aparece pero no desaparece... me pueden ayudar a encontrar la solución porque no puedo encontrarla solo. Muchas gracias !
const confirmationMessage = document.getElementById("message_validation"); // launch confirmationMessage form const launchConfirmationMessage = () => { confirmationMessage.style.display = "flex"; } //close confirmationMessage form const closeConfirmationMessage = () => { confirmationMessage.style.display = "none"; } // TimeOut du confirmationMessage const timeOutConfirmMess = () => { setTimeout(closeConfirmationMessage, 3000); } // open and close window after 3s function confirm() { if (launchConfirmationMessage() = true && closeConfirmationMessage() === false) { timeOutConfirmMess(); } } console.log(confirm()); .message-validation { display: none; align-items: center; justify-content: center; position: fixed; z-index: 1; left: 13%; top: 41%; overflow: auto; background-color: rgba(26, 39, 156, 0.9); color: white; padding: 5%; border-radius: 5px; } <div id="message_validation" class="message-validation"> Bravo! Votre réservation est prise en compte. </div>Además, básicamente el elemento css está en display:none y es durante una condición que se convierte en display:block así:
if (isOk){ confirm();}¡Gracias de nuevo!
llame a setTimeout con 3000 milisegundos inmediatamente después de mostrar el mensaje de confirmación. De esa manera, la función de cierre se llamará después de 3 segundos. Por lo tanto, la función de confirm es innecesaria, así que la eliminé. Los siguientes trabajos.
const confirmationMessage = document.getElementById("message_validation"); // launch confirmationMessage form const launchConfirmationMessage = () => { confirmationMessage.style.display = "flex"; setTimeout(closeConfirmationMessage, 3000); } //close confirmationMessage form const closeConfirmationMessage = () => { confirmationMessage.style.display = "none"; } launchConfirmationMessage(); .message-validation{ display: none; align-items: center; justify-content: center; position: fixed; z-index: 1; left: 13%; top: 41%; overflow: auto; background-color: rgba(26, 39, 156, 0.9); color: white; padding: 5%; border-radius: 5px; } <div id="message_validation" class="message-validation"> Bravo! Votre réservation est prise en compte. </div> Además, en su función de confirm , if la declaración nunca devolverá true porque las funciones no devuelven valores booleanos.
Entonces, en lugar de usar la función de confirm . Simplemente llame a launchConfirmationMessage cuando isOk sea verdadero. Lo llamé de inmediato en el fragmento para que veas que funciona, pero en tu base de código puedes usar lo siguiente en su lugar.
if (isOk) { launchConfirmationMessage(); }El problema en su código es esta cláusula if:
if (launchConfirmationMessage() = true && closeConfirmationMessage() === false){ // ... }Hay más de un error:
closeConfirmationMessage() === false nunca será verdadero, y launchConfirmationMessage() = true tambiéntrue a la llamada de launchConfirmationMessage : solo hay un signo igual en lugar de dos o tresEl siguiente es su código ligeramente corregido:
const confirmationMessage = document.getElementById("message_validation"); // launch confirmationMessage form const launchConfirmationMessage = () => { confirmationMessage.style.display = "flex"; } //close confirmationMessage form const closeConfirmationMessage = () => { confirmationMessage.style.display = "none"; } // TimeOut du confirmationMessage const timeOutConfirmMess = () => { setTimeout(closeConfirmationMessage, 3000); } // open and close window after 3s function confirm() { launchConfirmationMessage(); timeOutConfirmMess(); } console.log(confirm()); .message-validation { display: none; align-items: center; justify-content: center; position: fixed; z-index: 1; left: 13%; top: 41%; overflow: auto; background-color: rgba(26, 39, 156, 0.9); color: white; padding: 5%; border-radius: 5px; } <div id="message_validation" class="message-validation"> Bravo! Votre réservation est prise en compte. </div>Primero, su declaración if no es correcta. En una declaración if, siempre comparas dos cosas y usas "==" o "===". Tampoco devuelve ningún valor en su función auxiliar.
Para este código, no recomendaría una función de ayuda, el siguiente código funcionará.
const confirmationMessage = document.getElementById("message_validation"); // open and close window after 3s function confirm () { confirmationMessage.style.display = "flex"; setTimeout(() => { confirmationMessage.style.display = "none"; }, 3000) } console.log(confirm());