使用JavaScript将display:none改为block时出现错误求助

出现"cannot read the properties of null (Reading 'style')"错误，核心原因是document.getElementById("end_screen")未找到对应DOM元素，返回了null，因此无法读取style属性。具体原因及修复方案如下：

常见原因及修复方式 #

• 代码执行时机过早
  JS代码可能在DOM还未加载完成时就执行了，此时页面上的end_screen元素还未被渲染。
  修复：

  • 将JS代码移至<body>标签最底部，确保所有DOM元素加载完成后再执行。
  • 或使用DOMContentLoaded事件监听DOM加载完成：

    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById("end_screen").style.display = 'block';
    });
    

• 元素ID拼写错误
  检查HTML中目标div的id属性，确保和代码中的end_screen完全一致（ID区分大小写，下划线、字母都不能出错），比如确认HTML里是<div id="end_screen">而非endScreen或其他拼写。

• 元素为动态生成
  如果该div是通过其他JS代码动态添加到DOM中的，需确保修改样式的代码在元素被添加之后执行，比如放在生成元素的代码段之后。

额外语法修正 #

你的代码里block未加引号，属于语法错误，应写成'block'或"block"，否则会被解析为未定义变量。

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