Desarrollé un proyecto de Mentores Frontend llamado Aplicación de generador de consejos usando HTML, CSS y JS. Hay un error con mi solución y Firefox Developer. Cuando hice clic en el botón, el detector de eventos ejecuta la función de búsqueda y realiza una solicitud y cambia la interfaz de usuario de acuerdo con los datos recibidos de la respuesta; el problema es que cuando vuelvo a hacer clic, la interfaz de usuario no cambia y la consola muestra la misma respuesta que antes; esto no sucedió en el navegador Brave y supongo que también en otros navegadores basados en Chromium, quiero saber por qué sucede esto con Firefox Developer.
Enlace del repositorio: https://github.com/Perlishnov/advice-generator-app-main
Enlace del sitio web: 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) ) ); });Parece un problema de memoria caché. si la url es la misma, el navegador usa lo que ya está en el caché.
La forma más sencilla de arreglar eso: agregue un contador en su URL, para forzar el caché
"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>