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 !
call setTimeout with 3000 milliseconds immediately you show the confirmationMessage. That way, the close function will be called after 3 seconds. confirm function is hence unnecessary, so I removed it. The following works.
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>Also, in your confirm function, that if statement will never return true because the functions don't return boolean values.
So instead of using the confirm function. Simply call launchConfirmationMessage when isOk is true. I called it at once in the snippet for you to see that it works, but in your codebase you can use the following instead.
if (isOk) {
launchConfirmationMessage();
}
The problem in your code is this if clause:
if (launchConfirmationMessage() = true && closeConfirmationMessage() === false){
// ...
}
There are more than one errors:
closeConfirmationMessage() === false will never be true, and launchConfirmationMessage() = true alsotrue to a the call of launchConfirmationMessage: There is only one equal sign instead of tow or threeThe following is your code slightly corrected:
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>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());