Así que solo estoy jugando con HTML y Javascript y me preguntaba cómo hacer que un usuario haga clic en una imagen y luego esa imagen cambie después del clic. Al principio pensé que sería una llamada de función simple en un clic así:
HTML:
<input type="image" src="Images/img.png" id="img" onclick="imgChange()">JavaScript:
function imgChange() { var img = document.getElementById("img"); img.src="Images/img2.png"; }pero al ejecutarlo parece que no funciona. ¿Alguna sugerencia?
Funciona perfectamente bien
function imgChange() { var img = document.getElementById("img"); img.src="https://live.staticflickr.com/7166/6621290239_250dce025d_b.jpg"; } <input type="image" src="https://live.staticflickr.com/7440/8838399307_9e9e9668f6_b.jpg" id="img" onclick="imgChange()">También puede intentar mover las imágenes al mismo directorio que el archivo HTML para hacerlo más simple.
Parece funcionar perfectamente en el siguiente ejemplo. Sugeriría verificar que las referencias a las fuentes de imágenes que está utilizando sean válidas, ya que eso es lo único que cambié.
function imgChange() { var img = document.getElementById("img"); img.src = "https://www.tompetty.com/sites/g/files/g2000007521/f/styles/photo-carousel/public/Sample-image10-highres.jpg?itok=TDZEPjP8"; } <input type="image" src="https://www.tompetty.com/sites/g/files/g2000007521/f/styles/photo-carousel/public/sample001.jpg?itok=0Riiujkr" id="img" onclick="imgChange()">debería funcionar como está, pero podría intentar pasar el elemento a la función.
function imgChange(img){ img.src = "https://w.wallhaven.cc/full/pk/wallhaven-pkgkkp.png" } <img src="https://w.wallhaven.cc/full/rd/wallhaven-rdwjj7.jpg" onclick="imgChange(this)">