Repaso la matriz de preguntas/respuestas en las que solía mostrar.
const data = [ { question: "xxx", answer: "xxxx." }, { question: "xxx", answer: "xxx?" }, // etc, etc...Luego creo un bucle for que crea un elemento de artículo, un botón, h3 y un párrafo. Luego tendrá contenido de texto para cada botón que dice '+' y cada vez que hago clic en el botón, revela la respuesta y cuando vuelvo a hacer clic, se oculta.
Estoy buscando una manera de implementar setTimout que establece un temporizador para revelar la respuesta y luego un clearTimeout para cancelar una vez que se acabe el tiempo.
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); });Agregar setTimeout() en el oyente sería un buen lugar en su caso.
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); } });Manifestación:
fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(users => { for (const user of users) { const section = document.createElement('section'); const label = document.createElement('label'); const button = document.createElement('button'); const paragraph = document.createElement('p'); label.textContent = user.name; button.textContent = '+'; button.addEventListener('click', (event) => { const btn = event.target; const p = btn.nextElementSibling; switch (p.style.display) { case 'block': btn.textContent = '+'; p.style.display = 'none'; break; case 'none': btn.textContent = '-'; p.style.display = 'block'; break; } const timer = setTimeout(() => { btn.textContent = '+'; p.style.display = 'none'; clearTimeout(timer); }, 5000); if (p.style.display === 'none') { clearTimeout(timer); } }); paragraph.style.display = 'none'; paragraph.textContent = JSON.stringify(user.address); section.append(label); section.append(button); section.append(paragraph); document.body.append(section); } }) .catch(error => { console.error(error); }) <html> <body></body> </html>