如何使消息出现并在一段时间后消失？

Question

I'm having a problem with an issue with a feature on a website. Basically, I want a message to appear two seconds after clicking and disappear two seconds later on the screen.

 function messagePT () { let messagePortuguese = "<p id='invisivel' class='site-content'>O site é recente e continua em construção. As nossas desculpas por quaisquer problemas encontrados.</p>"; document.getElementById("flag-pt").innerHTML = messagePortuguese; setTimeout(() => { let elem = document.querySelector('#invisivel'); elem.parentNode.removeChild(elem); }, 2000); } function messageEN () { let messageEnglish = "<p id='invisivel' class='site-content'>The site is still quite new and remains under construction. Our apologies for any problems encountered.</p>"; document.getElementById("flag-pt").innerHTML = messageEnglish; setTimeout(() => { let elem = document.querySelector('#invisivel'); elem.parentNode.removeChild(elem); }, 2000); }

 <ul class="intro-lang-menu" id="success-btn"> <li><a href="/intro" class="intro-lang-pt" onclick="messagePT();"><img class="anim-quick anim-scale-30" src="<?php echo get_template_directory_uri(); ?>/assets/img/ico-flag-pt.png"></a></li> <li><a href="en/intro" class="intro-lang-en" onclick="messageEN();"><img class="anim-quick anim-scale-30" src="<?php echo get_template_directory_uri(); ?>/assets/img/ico-flag-en.png"></a></li> </ul> <div id="flag-pt" class="site-content"> </div>

Currently the code looks like this, anyone know how to solve this problem?

I tried to put a setTimeOut function inside another one, but it didn't work.

Answer 1

The issue I see is that when you click on the image you're doing a page redirect because of href="/intro" or href="en/intro" . To prevent the navigation, you can use the event object to call event.preventDefault() , however I assume you want to still navigate to the click, so we may need more details as to what you're trying to do.

Here's an example of event.preventDefault() :

 function messagePT (event) { event.preventDefault(); let messagePortuguese = "<p id='invisivel' class='site-content'>O site é recente e continua em construção. As nossas desculpas por quaisquer problemas encontrados.</p>"; document.getElementById("flag-pt").innerHTML = messagePortuguese; setTimeout(() => { let elem = document.querySelector('#invisivel'); elem.parentNode.removeChild(elem); }, 2000); } function messageEN (event) { event.preventDefault(); let messageEnglish = "<p id='invisivel' class='site-content'>The site is still quite new and remains under construction. Our apologies for any problems encountered.</p>"; document.getElementById("flag-pt").innerHTML = messageEnglish; setTimeout(() => { let elem = document.querySelector('#invisivel'); elem.parentNode.removeChild(elem); }, 2000); }

 <ul class="intro-lang-menu" id="success-btn"> <li><a href="/intro" class="intro-lang-pt" onclick="messagePT(event);"><img class="anim-quick anim-scale-30" src="<?php echo get_template_directory_uri(); ?>/assets/img/ico-flag-pt.png"></a></li> <li><a href="en/intro" class="intro-lang-en" onclick="messageEN(event);"><img class="anim-quick anim-scale-30" src="<?php echo get_template_directory_uri(); ?>/assets/img/ico-flag-en.png"></a></li> </ul> <div id="flag-pt" class="site-content"> </div>