JS点击切换图片到最后一张时按钮无法即时隐藏如何解决

问题根因 #

你的逻辑存在计数判断时机滞后的问题：

• HTML里默认写了1张展示图，gallery数组里存了另外3张，总共4张可切换图
• 当前判断逻辑是先校验counter是否超过数组长度，校验通过才执行换图+counter自增操作。当你第三次点击时，counter从2变成3，此时已经加载完最后一张图，但本次点击不会触发隐藏逻辑，必须等第四次点击时counter>=3才会进入隐藏分支，所以多出了一次无效点击。

解决方案 #

仅需调整JS代码的执行顺序，在加载完最后一张图的同时直接执行隐藏操作即可，属于最小改动，不会破坏原有任何功能，修改后的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 () {
  // 先执行换图、计数自增逻辑
  document.getElementById("getImage").src = gallery[counter];
  counter++;
  // 换图后判断是否已到最后一张，是则直接隐藏按钮、修改文案
  if (counter >= gallery.length) {
      document.getElementById("title_text").innerHTML = "test3";
      document.getElementById("under_text").innerHTML = "test4";
      document.getElementById("pink").style.display = "none";
  }
};

内容的提问来源于stack exchange，提问作者daydreamer