I built a project of Frontend Mentors called Advice generator App using HTML, CSS & JS. There is a bug with my solution and Firefox Developer. When I clicked on the button, the event listener run the fetch function and makes a request and changes the UI accordingly to the data received from the response; the problem is that when I click again, the UI doesn't change and the console shows the same response as before; this didn't happen on brave browser and I suppose other Chromium-based browsers as well, I want to know why this happens with Firefox Developer?
Link of repo: https://github.com/Perlishnov/advice-generator-app-main
Link of website: https://advice-generator-app-main-kappa.vercel.app/
"use strict";
//Html Elements
const rollDice = document.getElementById("roll-dice");
const adviceNumber = document.getElementById("advice-number");
const adviceParagraph = document.getElementById("advice");
const url = "https://api.adviceslip.com/advice";
//Dice button logic
rollDice.addEventListener("click", () => {
fetch(url)
.then((response) => response.json())
.then(
(data) => (
(adviceNumber.textContent = data.slip.id),
(adviceParagraph.textContent = data.slip.advice)
)
);
});
It's looks like a cache memory issue. if the url is the same, the browser uses what is already in the cache.
The simplest way to fix that: add a counter on your url, to force the cache
"use strict";
//Html Elements
const
rollDice = document.getElementById('roll-dice')
, adviceNumber = document.getElementById('advice-number')
, adviceParagraph = document.getElementById('advice')
, url =
{ ref : 'https://api.adviceslip.com/advice'
, count : 0
}
;
//Dice button logic
rollDice.onclick = () =>
{
fetch( `${url.ref}?c=${++url.count}`)
.then( r => r.json() )
.then( data =>
{
adviceNumber.textContent = data.slip.id
adviceParagraph.textContent = data.slip.advice
})
}<div>
<h3 id="advice-number"> n </h3>
<p id="advice">...</p>
</div>
<button id="roll-dice"> roll-dice </button>