Estoy tratando de crear un código simple en el que si el usuario hace clic en el gif, cambiará a otro gif repetidamente hasta que llegue al final del ciclo, donde se reinicia. Este es el fragmento de código relevante:
var storedColoredGif = document.getElementById("coloredGif"); //we grab the gif and store it in storedColoredGif var onGifClick = function(){ if (document.getElementById("coloredGif").src === "/images/green.gif"){ document.getElementById("coloredGif").src = "/images/blue.gif"; } else if (document.getElementById("coloredGif").src == "/images/blue.gif"){ document.getElementById("coloredGif").src = "/images/yellow.gif"; } else if (document.getElementById("coloredGif").src == "/images/yellow.gif"){ document.getElementById("coloredGif").src = "/images/red.gif"; } else if (document.getElementById("coloredGif").src == "/images/red.gif"){ document.getElementById("coloredGif").src = "/images/green.gif"; }} storedColoredGif.addEventListener("click", onGifClick);Es muy sencillo. Todos los nombres de las rutas son correctos y la fuente de los gifs es inicialmente verde. El programa almacena el gif en una variable, luego en la función verifica cuál es la fuente del gif y lo cambia en consecuencia cuando el usuario hace clic en el gif. Pero no pasa nada cuando hago clic en él. ¿Estoy haciendo algo mal en mis bucles? Si tuviera que adivinar, el problema es que estoy cambiando correctamente la fuente, es solo que nunca actualizo el html (pero actualizar la página pondría el gif en verde nuevamente porque eso es lo que configuré en el cuerpo principal del html). ¿Qué estoy haciendo mal?
Así es como se coloca el gif en el html (el green.gif se muestra bien, es solo que no cambia entre los gifs cuando se hace clic)
<img src="/images/green.gif" id="coloredGif" title="Click me!">EDICIÓN FINAL: gracias a 2 usuarios muy útiles a continuación, pude darme cuenta de que obtener el src del gif en realidad devuelve la ruta completa del dominio y, como tal, mis declaraciones if nunca progresan porque siempre son falsas. Ambas soluciones funcionaron.
La solución fue simplemente evitar el hecho de que verificar el src devolvía la ruta completa del dominio, en lugar de solo las carpetas y la ruta gif.
El .src devolverá una cadena completa de la ruta: http://example.com/img/... en lugar de solo lo que está comparando en su if statement .
Aquí hay un archivo console.log de la salida .src y .getAttribute para que lo entiendas:
http://localhost:5501/images/green.gif // Output of .src /images/green.gif // Output of getAttribute Debería quedar más claro ahora por qué su if statement no funcionaba: estaba buscando algo que simplemente era false en todos los casos. No dude en consultar los valores de console.log que está comprobando cuando se encuentre con esos problemas; en la mayoría de los casos, solucionará la situación.
En cambio, mi consejo es usar .setAttribute para configurarlo y .getAttribute para obtenerlo, lo que devuelve la ruta correcta que está buscando.
Además, puede considerar usar let & const en lugar de var . Aquí está el código usando ambos métodos como se indicó anteriormente.
const storedColoredGif = document.getElementById("coloredGif"); //we grab the gif and store it in storedColoredGif storedColoredGif.addEventListener("click", () => { const currentColoredGif = document.getElementById("coloredGif").getAttribute("src") if (currentColoredGif == "/images/green.gif") { storedColoredGif.setAttribute("src", "/images/blue.gif") } else if (currentColoredGif == "/images/blue.gif") { storedColoredGif.setAttribute("src", "/images/yellow.gif") } else if (currentColoredGif == "/images/yellow.gif") { storedColoredGif.setAttribute("src", "/images/red.gif") } else if (currentColoredGif == "/images/red.gif") { storedColoredGif.setAttribute("src", "/images/green.gif") } })img
srctambién incluye el dominio, para simplificar, simplemente marqueincludes, que se ejecuta si la cadena está incluida en elsrc
Cómo funciona el método include - ref. MDN
var storedColoredGif = document.getElementById("coloredGif"); //we grab the gif and store it in storedColoredGif var onGifClick = function() { if (document.getElementById("coloredGif").src.includes("/images/green.gif")) { document.getElementById("coloredGif").src = "/images/blue.gif"; } else if (document.getElementById("coloredGif").src.includes("/images/blue.gif")) { document.getElementById("coloredGif").src = "/images/yellow.gif"; } else if (document.getElementById("coloredGif").src.includes("/images/yellow.gif")) { document.getElementById("coloredGif").src = "/images/red.gif"; } else if (document.getElementById("coloredGif").src.includes("/images/red.gif")) { document.getElementById("coloredGif").src = "/images/green.gif"; } } storedColoredGif.addEventListener("click", onGifClick); <img src="/images/green.gif" id="coloredGif" title="Click me!">