图片替换并保留Cookie的功能代码是否存在问题？求解决方案

让我帮你拆解下这段代码里存在的问题，以及对应的解决办法：

存在的两个主要错误 #

• 函数作用域问题：你把hideImage()函数定义在了DOMContentLoaded的回调函数内部，而HTML按钮的onclick="hideImage()"是在全局作用域下调用的，这会导致点击按钮时浏览器找不到这个函数，直接抛出ReferenceError错误。
• Cookie设置不完整：当前设置的Cookie是会话级Cookie，用户关闭浏览器后就会失效；而且没有指定Cookie的路径，可能会在网站的不同子路径下无法读取到这个Cookie。

修复后的完整代码 #

<html>
  <button id="hide-btn"> Remove img </button>
  <img id="my_images" src="http://karachiairport.com.pk/images/data-section/airline/24-11.png">
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const imgElement = document.getElementById("my_images");
      const hideBtn = document.getElementById("hide-btn");

      // 检查Cookie是否存在
      if (document.cookie.indexOf('image_clicked=true') > -1) {
        imgElement.src = "http://www.1dmag.com/all_asset/img/no-image.png";
      }

      // 使用事件监听替代内联onclick，避免作用域问题
      hideBtn.addEventListener('click', function() {
        imgElement.src = "http://www.1dmag.com/all_asset/img/no-image.png";
        // 设置带有效期和路径的Cookie，这里有效期设为30天，可按需调整
        const expiryDate = new Date();
        expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000));
        document.cookie = "image_clicked=true; expires=" + expiryDate.toUTCString() + "; path=/";
      });
    });
  </script>
</html>

关键修改说明 #

• 解决作用域问题：移除了HTML中的内联onclick，改用JavaScript事件监听的方式绑定按钮点击事件，这样函数就处于回调内部的作用域中，能正常访问到DOM元素。
• 完善Cookie设置：给Cookie添加了有效期（这里设为30天）和路径path=/，确保Cookie在整个网站域名下都能被读取，并且不会随浏览器关闭而立即失效。
• 优化DOM元素获取：提前获取DOM元素并赋值给变量，避免重复调用getElementById，提升代码性能。

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