Javascript not hiding button on last image-CodePudding

I have a JSFiddle that shows my code now:

Basically there is an image button (pink flower) and then there are 4 images that change when the button is clicked. Now the issue is that I want the button to hide when I get to the last image. Right now I need to click the button twice to get it to hide on the last image. But I want with the last click of the button to hide it at the same time that the last image in the gallery is shown.

One of the images is in the html part of the code, which might be what causes this issue, I think, but I'm not sure how to do this differently without breaking the code?

(random images from google used for the sake of testing)

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  ;
  }
};

CodePudding user response：

I have made some change to your code. It will help you.

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  ;
  }
};

CodePudding user response：

try this Evaluate when the counter is equal to the size of your array if so then do the job you want

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  ;
  }
};

CodePudding user response：

The issue is that you increment your counter after the counter >= gallery.length check.

The correct solution is:

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";
  }
};