JS调用classList.add报Cannot read properties of null错误求解

控制台抛出Uncaught TypeError: Cannot read properties of null (reading 'classList')的直接原因是，document.getElementById("player")执行时没有匹配到id为player的DOM元素，返回值为null，对null读取classList属性就会触发这个类型错误。
你当前把script标签放在body末尾的写法是正确的，不存在DOM未加载完成就执行元素查询的问题，不需要调整脚本引入位置。虽然你贴的静态HTML代码里确实定义了id为player的div，但运行时找不到元素基本是以下几种情况导致的。

• 先做结果校验：在let character = document.getElementById("player");代码下新增console.log(character)，点击触发按钮时看控制台输出，如果输出为null，就能确认运行时DOM树里确实不存在对应id的元素。
• 检查id拼写正确性：getElementById对大小写、字符拼写完全敏感，确认实际渲染的页面中，目标元素的id没有笔误（比如错写为palyer、Player、id前后带多余空格），也没有被其他脚本修改过id值。
• 检查元素是否被动态移除：打开浏览器开发者工具的「元素」面板，全局搜索id="player"，确认点击按钮触发函数时，这个元素仍然存在于DOM树中，没有被其他业务逻辑提前删除。
• 增加非空容错逻辑，避免报错阻断页面其他功能运行，修改后的JS代码如下：

function jumpPlayer() {
    let character = document.getElementById("player");
    // 元素不存在时直接终止逻辑，不抛出错误
    if (!character) return;
    character.classList.add("jumpPlayer");
}

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