Todo el código funciona bien, pero cada vez que hago clic en el botón para generar un consejo, el consejo se retrasa y no se muestra en mi sitio cada vez que se hace clic en el círculo.
¿Hay alguna forma de sincronizar perfectamente el botón y el consejo generado?
¿Cómo puedo mejorar mi código?
const number = document.querySelector(".number"); const advice = document.querySelector(".advice"); const circle = document.querySelector(".circle") async function randomAdvice() { try { const random = await fetch("https://api.adviceslip.com/advice"); console.log(random) const adviceGenerated = await random.json(); console.log(adviceGenerated) number.textContent = `#${adviceGenerated.slip.id}`; advice.textContent = `"${adviceGenerated.slip.advice}"`; } catch (e) { console.log(e) } } randomAdvice(); circle.addEventListener("click", () => { randomAdvice() }); <button class="circle">Circle</button> <div class="number"></div> <div class="advice"></div>