为什么我的ChangeRoom方法执行两次且重置了我要修改的对象值

核心触发原因 #

1. 循环变量存在闭包问题
   你所有for循环中的迭代变量i都没有使用let/var声明，默认成为全局变量。受JS变量提升特性影响，循环结束后所有按钮的onclick事件都引用同一个全局的i，点击按钮时会同时触发多个按钮绑定的函数，导致先后执行了两次ChangeRoom调用，第一次切换到MainHall，第二次又切回了Graveyard，最终currentRoom被第二次调用覆盖。
2. 按钮插入位置错误导致事件二次触发
   代码中将所有导航按钮都追加到了<label>标签内部，<label>元素的默认交互特性会导致点击事件被二次冒泡触发，进一步加重了函数重复执行的问题。

• 给所有循环的迭代变量添加let声明，创建块级作用域解决闭包问题，例如把所有for (i = 0; 修改为 for (let i = 0;。
• 修改按钮插入位置，不要将按钮放在<label>内部，把UpdateNavigation函数中navsDiv.lastElementChild.appendChild(elem); 改为 navsDiv.appendChild(elem);，直接将按钮追加到导航容器下。
• 绑定点击事件时添加事件阻止逻辑，避免异常冒泡：

elem.onclick = function(e) {
  e.stopPropagation();
  GetCurrentRoom().navButtons[i].func();
};

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