0

Lo que intento hacer es que cada vez que hago click en el boton me muestre la siguiente imagen. Sin embargo no funciona. En algunas webs dicen que no funciona porque la ruta (img.jpg) no es correcta como condicion, pero no entiendo el por que. Gracias!

function showImage(){
	

	if (document.getElementById('imgLabel1').src == 'img1.jpg')
	{
		document.getElementById('imgLabel1').src  = 'img2.jpg';
	}
	else if (document.getElementById('imgLabel1').src == 'img2.jpg')
	{
		document.getElementById('imgLabel1').src  = 'img3.jpg';
	}
	else
	{
		document.getElementById('imgLabel1').src  = 'img1.jpg';
	}

}
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="gallery.js"></script>
	<link rel="stylesheet" href="styleImg.css">
	<title></title>
</head>
<body>
	<img id="imgLabel1" src="img1.jpg">
	<button id="next" onclick="showImage()">NEXT IMAGE</button>
</body>
</html>

1
  • La imagen tendría que existir, y conviene que el elemento src tenga una ruta completa de la imagen.
    – A. Cedano
    el 30 dic. 2017 a las 1:24

2 respuestas 2

1

El problema es la condición, la ruta de la imagen al ser cargada por el DOM es de la raíz de tu dominio y sus directorio hasta llegar a la imagen.

Ejemplo: www.google.es/img1.jpg

Una posible solución es comprobar el último segmento de la url de la imagen, que es el que te interesa y hacer un funcionar tu función.

function showImage() {
	const img = document.getElementById('imgLabel1');
	const source = img.src.substr(img.src.lastIndexOf('/') + 1);
	const sources = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
	const index = sources.findIndex(src => src === source) + 1;
	img.src = sources[index] || sources[0];
}
<img id="imgLabel1" src="img1.jpg">
<button id="next" onclick="showImage()">NEXT IMAGE</button>

2
  • Y por que al cambiarle el source directamente sin condiciones mediante document.getElementById('imgLabel1').src = 'img2.jpg' si funciona?. En este caso el DOM no cargaria la imagen de la misma forma que en una condicion?
    – jaranza
    el 30 dic. 2017 a las 2:17
  • Porque al cargar esa nueva imagen la ruta absoluta la coge del punto que se encuentre tu página. El problema está al el src de la img qué representa algo como wwww.google/img2.jpg y no img2.jpg qué es lo qué esperas.
    – dddenis
    el 30 dic. 2017 a las 10:49
0

El error está en que al hacer solamente img.png, la url completa de la imagen, se obtendra del actual dominio, puedes verlo aqui:

window.addEventListener("load", () => {
  var img = document.createElement("IMG");
      img.src = "img.png";
      
  console.info(img.src);
});

Lo que simplemente debes hacer es agregar la url completa

1
  • Muchas gracias! Con tu ejemplo me quedo mucho mas claro.
    – jaranza
    el 3 ene. 2018 a las 2:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.