JavaScript实现按下E键显示临时图片功能的问题排查

你的代码没反应的核心原因是脚本执行时机不对——浏览器从上到下解析HTML，你把script写在body前面，当脚本执行时，body里的#first元素还没被创建出来，document.getElementById("first")会返回null，自然没法修改它的样式。我们顺便把基础的自动消失功能也加上，贴合你的需求。

修复后的完整代码 #

<body>
  <div id="first" style="height:400px; width:400px; display:none;">
    <img src="test.png"> 
  </div>

  <script>
    // 绑定键盘按下事件
    document.addEventListener('keydown', function(e) {
      // 转小写后判断，大小写E都能触发
      if (e.key.toLowerCase() === 'e') {
        showImage();
      }
    });

    function showImage() {
      const bubble = document.getElementById("first");
      // 确保元素存在再操作，避免报错
      if (bubble) {
        bubble.style.display = 'block';
        // 3秒后自动隐藏，时间可自行调整
        setTimeout(() => {
          bubble.style.display = 'none';
        }, 3000);
      }
    }
  </script>
</body>

关键改动说明 #

• 调整脚本位置：把script放到body最后，确保DOM元素全部加载完成后再执行脚本，这样能正常获取到#first元素。
• 替换按键判断逻辑：用e.key.toLowerCase() === 'e'代替keyCode，代码更易读，还能避免不同浏览器的keyCode兼容性问题。
• 添加自动消失功能：用setTimeout在元素显示3秒后，将其改回display:none，实现基础的自动隐藏效果。
• 增加元素存在判断：避免因元素不存在导致控制台报错，让代码更健壮。

如果后续要扩展功能也很简单：

• 随机位置：给#first加position: fixed样式，在showImage里随机设置left和top值，比如bubble.style.left = Math.random() * (window.innerWidth - bubble.offsetWidth) + 'px'。
• 音效：在showImage里创建Audio对象并播放，比如new Audio('egg-sound.mp3').play()。

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