使用JavaScript事件处理器点击图片隐藏区块失效，求助解决

你的代码无法运行的核心原因是JavaScript脚本在DOM元素加载完成前就执行了。当document.getElementById("banner")和document.getElementById("screen1")执行时，页面里的<div id="screen1">和<img id="banner">还没被浏览器解析，所以这两个变量的值都是null，自然无法绑定点击事件。

下面给你三种可行的解决办法：

方案1：把脚本移到末尾 #

将<script>标签放到</body>闭合标签之前，让浏览器先解析完所有DOM元素再执行JS代码：

<body>
    <!-- Header -->
    <div id="screen1" class="header section">
      <!-- Title -->
      <div id="title">
        <img src="https://picsum.photos/id/1/20/30">
        <h1>The Legend of Zelda: Almanac</h1>
        <img src="https://picsum.photos/id/1/20/30">
      </div>
      <!-- Subtitle -->
      <h3>A Complete Collection of all TLoZ Games</h3>
      <!-- Main Image -->
      <img id="banner" src="https://picsum.photos/id/1/20/30">
    </div>

    <!-- 脚本移至此处 -->
    <script src="interactive.js"></script>
</body>

方案2：用DOMContentLoaded事件包裹代码 #

如果不想移动脚本位置，就在JS代码里监听DOMContentLoaded事件，确保DOM加载完成后再执行元素获取和事件绑定逻辑：

document.addEventListener('DOMContentLoaded', function() {
    let banner = document.getElementById("banner");
    let screen1 = document.getElementById("screen1");

    function changeDisplay() {
        screen1.style.display = "none"
    }

    banner.addEventListener("click", changeDisplay);
});

方案3：给script标签添加defer属性 #

defer属性会让浏览器延迟脚本执行，直到DOM解析完成，原JS代码无需修改：

<script src="interactive.js" defer></script>

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