Tengo un JSFiddle que muestra mi código ahora:
https://jsfiddle.net/qtu1xgw3/2/
Básicamente hay un botón de imagen (flor rosa) y luego hay 4 imágenes que cambian cuando se hace clic en el botón. Ahora el problema es que quiero que el botón se oculte cuando llegue a la última imagen. En este momento, necesito hacer clic en el botón dos veces para que se oculte en la última imagen. Pero quiero con el último clic del botón ocultarlo al mismo tiempo que se muestra la última imagen de la galería.
Una de las imágenes está en la parte html del código, que podría ser la causa de este problema, creo, pero no estoy seguro de cómo hacer esto de manera diferente sin romper el código.
(imágenes aleatorias de google utilizadas con fines de prueba)
HTML:
<div class="test"> <div class="desc"> <h2 id="title_text">test1</h2> <p id="under_text">test2</p> </div> <div id="pink"> <img src="https://images.vexels.com/media/users/3/234325/isolated/lists/cba2167ec09abeeee327ffa0f994151b-detailed-flower-illustration.png" onclick="imagefun()"></div> <div class="game"> <img src="https://images.vexels.com/media/users/3/143128/isolated/lists/2a84565e7c9642368346c7e6317fa1fa-flat-flower-illustration-doodle.png" id="getImage"></div> </div>CSS:
.game img { width: 300px; height: auto; } .test { display: flex; flex-direction: row; }JS:
var counter = 0, gallery = ["https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg", "https://api.assistivecards.com/cards/gardening/flowers.png", "https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg"], imagefun = function () { if (counter >= gallery.length) { document.getElementById("title_text").innerHTML = "test3"; document.getElementById("under_text").innerHTML = "test4"; document.getElementById("pink").style.display = "none"; } else{ document.getElementById("getImage").src = gallery[counter]; counter++; } };He hecho algunos cambios en tu código. Te ayudará.
var counter = 0, gallery = ["https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg", "https://api.assistivecards.com/cards/gardening/flowers.png", "https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg"], imagefun = function () { if (counter == gallery.length -1) { document.getElementById("getImage").src = gallery[counter]; document.getElementById("pink").style.display = "none"; } else{ document.getElementById("getImage").src = gallery[counter]; counter++; } };intente esto Evalúe cuándo el contador es igual al tamaño de su matriz, si es así, haga el trabajo que desea
imagefun = function () { if(counter==gallery.length) { document.getElementById("getImage").style.display = "none"; } if (counter >= gallery.length) { document.getElementById("title_text").innerHTML = "test3"; document.getElementById("under_text").innerHTML = "test4"; document.getElementById("pink").style.display = "none"; } else{ document.getElementById("getImage").src = gallery[counter]; counter++; } };El problema es que incrementas tu contador después de la comprobación counter >= gallery.length .
La solución correcta es:
const gallery = [ "https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg", "https://api.assistivecards.com/cards/gardening/flowers.png", "https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg", ]; let counter = 0; document.getElementById("getImage").src = gallery[counter]; function imagefun() { counter += 1; document.getElementById("getImage").src = gallery[counter]; if (counter >= gallery.length - 1) { document.getElementById("title_text").innerHTML = "test3"; document.getElementById("under_text").innerHTML = "test4"; document.getElementById("pink").style.display = "none"; } };