Chrome运行JS按钮动画报Cannot read properties of null (reading 'animate')求助

报错原因 #

你遇到的Cannot read properties of null (reading 'animate')报错来自两个常见的代码问题：

• 你修改代码时拼写错误：DOM标准API的正确写法是document.getElementById，你写的document.getElementByID中最后一个字母D是大写，不符合标准，会导致方法返回null，调用null.animate就会抛出该类型错误。
• JS执行时机早于DOM渲染：如果你的JS代码放在DOM元素之前执行（比如放在<head>标签内），代码运行时页面还没渲染出对应的节点，不管是document.body还是你要查询的元素都会返回null，也会触发该报错。

修复方案 #

1. 把你修改的JS代码还原，原代码里的if (document.body.animate)判断逻辑是正确的，不需要额外修改为判断#aaa元素的属性。
2. 调整JS的执行时机，确保DOM渲染完成后再运行JS代码，你可以选择以下任意一种方式：

• 把所有JS代码放在HTML的</body>闭合标签之前
• 把所有JS代码包裹在DOM加载完成的事件回调中，示例如下：

document.addEventListener('DOMContentLoaded', function() {
  // 此处粘贴你原来所有的JS代码即可，不需要修改原有逻辑
  function pop (e) {
    // 原有代码不变
  }
  function createParticle (x, y, type) {
    // 原有代码不变
  }
  function removeParticle (e) {
    // 原有代码不变
  }
  if (document.body.animate) {
    document.querySelectorAll('button').forEach(button => button.addEventListener('click', pop));
  }
})

3. 后续写代码时注意DOM API的大小写拼写，避免因为拼写错误返回空值。

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