JS/HTML onclick触发shuffle后页面元素消失，无法重复切换随机图

你遇到的按钮、页面元素消失的问题，和数组是否封装在函数里没有关系，是两个硬错误叠加导致的：

• 核心元凶是误用document.write()：这个API的特性是页面完成初始加载后，任何时机调用它，都会直接清空当前文档的全部原有内容，把传入的字符串作为新的文档内容覆盖渲染。你点击按钮时页面已经加载完成，调用document.write()自然会把按钮、初始图容器全部冲掉，只剩写入的随机图片段，和你遇到的异常状态完全匹配。
• 衍生逻辑漏洞：
  • 给所有随机图硬编码了重复的id="Meme1"，违反HTML id唯一的规范，后续DOM查询会命中错误元素
  • 把换图逻辑拆成三个独立函数的调用链存在断层，没有统一处理旧图清理、状态重置的流程
  • 存在冗余的初始调用：页面加载完成就直接执行一次shuffle()，违背了“刷新/加载时固定显示初始图”的需求
  • 没有上一次随机图的清理逻辑，就算解决了document.write()的问题，多次点击也会让新旧图片堆叠显示

完全不需要用document.write()动态拼接DOM，只要提前预留固定的图片展示容器，直接通过修改图片的src属性完成换图，就能同时满足所有功能要求，也不会出现页面元素消失的问题：

• 页面加载/刷新时固定显示初始图，随机图容器默认隐藏
• 点击Shuffle按钮时自动隐藏初始图，从预设数组中随机选取图片替换
• 支持无限次重复点击，每次都生成新的随机图，按钮全程保持可见
• 加轻量优化：记录上一次展示的随机图索引，避免连续两次点击出现同一张图，体验更流畅

<body>
  <button onClick="handleShuffleClick()">Shuffle</button>
  <!-- 固定初始图：仅页面首次加载/刷新时显示 -->
  <div id="initialImageContainer">
    <img src="images/zahl1.jpg" alt="Number">
  </div>
  <!-- 预留的随机图容器：初始状态隐藏 -->
  <div id="randomImageContainer" style="display: none;">
    <img id="randomImage" alt="Random Meme">
  </div>

  <script type="text/javascript">
    // 预先定义随机图片路径数组，不需要每次点击重新创建
    const randomImageList = [
      "images/meme1.jpg",
      "images/meme2.jpg",
      "images/meme3.jpg"
    ];
    // 记录上一次展示的随机图索引，避免连续两次出同一张
    let lastRandomIndex = -1;

    function handleShuffleClick() {
      // 隐藏初始图容器（仅第一次点击时生效，后续不会重复操作）
      document.getElementById('initialImageContainer').style.display = 'none';
      // 显示随机图容器
      const randomContainer = document.getElementById('randomImageContainer');
      randomContainer.style.display = 'block';

      // 生成不重复的随机索引
      let currentRandomIndex;
      do {
        currentRandomIndex = Math.floor(Math.random() * randomImageList.length);
      } while (currentRandomIndex === lastRandomIndex);
      lastRandomIndex = currentRandomIndex;

      // 直接替换图片src完成切换，无DOM覆盖、无页面清空风险
      document.getElementById('randomImage').src = randomImageList[currentRandomIndex];
    }
  </script>
</body>

• 刷新/重新加载页面时，所有DOM状态重置，自动回到显示固定初始图的状态，随机图容器重新隐藏
• 第一次点击Shuffle按钮，自动隐藏初始图，展示第一张随机图
• 后续每一次点击，都会自动切换为和上一次不同的随机图，按钮全程保持可点击状态
• 全程没有使用会覆盖文档内容的API，不会出现任何页面元素消失的问题

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