Tengo una función que continúa un paso más de lo necesario. Cuando se hace clic en la imagen (elefant.png), la imagen (scale1.png) cambia. Hay 5 fotos y funciona bien. El problema es que cuando se muestra la última imagen y hago clic en (elefant.png) nuevamente, aparece una imagen indefinida. No entiendo por qué no se detiene en la última imagen (scale5.png)?
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <link rel="stylesheet" href="style.css"> <body> <div class="wrapper1"> <h2 id="title_text">Hey</h2> <img src="image/scale1.png" id="getImage"> <img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()"> </div> <script type="text/javascript"> var counter = 0, gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"], imagefun = function () { document.getElementById("getImage").src = gallery[counter]; counter++; if (counter >= 4) { document.getElementById("title_text").innerHTML = "New text!"; } }; </script> </body> </html>Esta podría ser una solución fácil, pero no soy bueno con javascript. Intenté buscar una respuesta, pero no estoy seguro de qué buscar, ya que no sé qué causa el problema.
No estoy exactamente seguro de cuál debería ser su resultado final una vez que llegue al final de su matriz de galería, pero tal como está, cambia title_text a "¡Nuevo texto!".
El problema con su código tal como está es que siempre incrementa el contador y cambia la fuente getImage en función de ese número entero. Eso no se detiene una vez que su contador llega a 4.
Usaría la longitud de la matriz como un punto de parada y solo incrementaría la variable del contador hasta que se alcance ese límite. Yo escribiría algo como esto:
var counter = 0, gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"], imagefun = function () { if (counter >= gallery.length) { document.getElementById("title_text").innerHTML = "New text!"; } else{ document.getElementById("getImage").src = gallery[counter]; counter++; } }; <div class="wrapper1"> <h2 id="title_text">Hey</h2> <img src="image/scale1.png" id="getImage"> <img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()"> </div>Siempre ejecuta la función y cambia la fuente de la imagen, y solo luego verifica el valor del counter . Es por eso que continuará y cambiará la fuente incluso cuando el contador sea mayor que 3.
Una solución sería cambiar el valor de counter condicionalmente:
if (counter < gallery.length - 1) { counter++; }