JavaScript实现动画扫帚：动态修改元素ID后行走点击事件失效问题求助

脚本是自上而下按顺序执行的，出错逻辑非常明确：

• 代码执行到给walkingBroom绑定点击事件这行时，扫帚元素的初始ID还是stillBroom，页面上根本不存在ID为walkingBroom的元素，getElementById会返回null，绑定事件的操作直接抛出空引用错误，完全没有执行成功。
• 哪怕后续双击操作把元素ID改成了walkingBroom，当初没绑成功的点击事件也不会自动补上，所以点击扫帚永远不会触发加类名的逻辑。
  之前排查判断“ID修改不生效”属于误判，实际上animate函数里修改ID的操作是完全正常生效的，问题出在绑事件的时机完全不对。

核心调整思路是不要在页面初始加载时查找后续才会修改ID的元素，在双击触发修改ID之后，直接给当前拿到的DOM元素引用绑定点击事件，彻底规避空引用问题：

// 初始阶段只绑定可以正常定位的元素的双击事件，只获取一次元素引用即可
const broomEl = document.getElementById("stillBroom");
broomEl.addEventListener("dblclick", animate);

function animate(){
  // 直接复用拿到的元素引用操作DOM，不用重复查ID
  broomEl.src = "broom.gif";
  broomEl.id = "walkingBroom";
  // 等元素ID修改完成后，直接绑定点击事件，此时元素引用真实存在
  broomEl.addEventListener("click", walk);
}

function walk(){
  // 直接操作同一个元素引用修改类名，避免再次查ID带来的定位问题
  broomEl.className = "broom pattern0 speed1";
}

• 同一DOM节点在脚本里只要成功获取一次元素引用就够用了：哪怕后续修改元素的ID、类名、src，这个JS变量依然指向对应的节点，不需要每次操作都重新getElementById查一遍，既提升性能也能避免改了ID之后找不到元素的问题
• 绑定依赖动态属性的元素事件时，必须等元素把对应属性修改完成后再执行绑定操作，否则绑定时元素还不具备对应属性，必然出现空值报错。

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