All code is working well but whenever I click the button to generate an advice, the advice is delayed and it's not showing in my site whenever the circle is clicked.
Is there a way for me to sync perfectly the button and the generated advice ?
How can I improve my code?
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>