I’m new to learning JavaScript and I’m trying to open then close a custom message after 3 seconds of appearing but my function doesn’t work. The message appears but does not disappear… can you help me find the solution because I can’t find it alone. Thanks very much !
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>
Also, basically the css element is in display:none and it is during a condition that it becomes display:block like this:
if (isOk){ confirm();}
Thanks you again !
Advertisement
Answer
First your if statement is not correct. In a if statement you always compaire two things and you use “==” or “===”. You also doesn’t return any values in your helper function.
For this code I wouldn’t recommend a helper function, the code below will work.
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());