I iterate over the array of questions/answers in which I used to display.
const data = [ { question: "xxx", answer: "xxxx." }, { question: "xxx", answer: "xxx?" }, // etc, etc...
I then create a for loop that creates an article element, button, h3, and paragraph. It will then have text content for each button that says '+' and every time I click on the button, it reveals the answer and when I click back it hides.
I'm looking for a way to implement the setTimout which sets a timer for revealing the answer and then a clearTimeout to cancel once the time is up.
const main = document.querySelector('main'); data.forEach(trivia => { const article = document.createElement('article'); const button = document.createElement('button'); button.type = 'button'; button.textContent = '+'; button.addEventListener('click', () => { button.textContent = p.classList.contains('hidden') ? '-' : '+'; p.classList.toggle('hidden'); }); article.appendChild(button); const h3 = document.createElement('h3'); h3.textContent = trivia.question; article.appendChild(h3); const p = document.createElement('p'); p.textContent = trivia.answer; p.classList.add('hidden'); article.appendChild(p); main.appendChild(article); });
Adding setTimeout()
on the listener would be a good place in your case.
button.addEventListener('click', () => {
button.textContent = p.classList.contains('hidden') ? '-' : '+';
p.classList.toggle('hidden');
const timer = setTimeout(() => {
// code for hiding the element
clearTimeout(timer);
}, 5000); // 5 seconds
if (p.classList.contains('hidden')) {
clearTimeout(timer);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.