Chrome/Edge可识别未声明JS变量tosBox的原因及IE兼容问题解析

这背后是现代浏览器和旧版IE对DOM元素id的全局变量挂载规则差异导致的：

1. 现代浏览器的「自动全局变量」特性 #

Chrome、Edge这类基于Chromium的现代浏览器，会遵循HTML规范里的一个历史遗留特性：当DOM元素拥有id属性时，浏览器会自动在全局window对象上创建一个同名变量，指向该元素。

所以你代码里虽然只声明了var checkbox = document.getElementById("tosBox");，但因为复选框的id是tosBox，浏览器自动帮你在全局注册了window.tosBox，你的changeHandler()和clicker()函数直接用tosBox时，其实访问的是这个自动生成的全局变量，自然能正常运行。

2. 旧版IE的行为差异 #

旧版IE在处理动态通过innerHTML添加的元素时，不会像现代浏览器那样立即把元素的id注册到全局对象上。当你的点击或change事件触发时，全局作用域里并没有tosBox这个变量，所以就会抛出「未定义」的错误。

而当你把变量名改成tosBox后，var tosBox = document.getElementById("tosBox");显式在全局作用域声明了这个变量，不管浏览器有没有自动挂载，函数里都能访问到这个手动声明的变量，所以IE也能正常工作了。

3. 最佳实践：别依赖自动全局变量 #

这个自动挂载的特性虽然方便，但属于历史遗留，不推荐依赖它——容易和全局变量冲突，也会导致像你遇到的跨浏览器兼容性问题。正确的做法是：

• 始终通过document.getElementById()、document.querySelector()等方法获取元素引用
• 把元素引用存在变量里，在函数里使用这个变量，而不是直接用id名

比如修改你的函数：

function changeHandler() {
  var checkbox = document.getElementById("tosBox");
  if (!checkbox.checked) alert("You must agree to the Terms of Service");
}

function clicker() {
  var checkbox = document.getElementById("tosBox");
  if (!checkbox.checked) alert("You must agree to the Terms of Service");
  else {
    // Go to review order page
  }
}

或者复用之前声明的checkbox变量（确保它在函数作用域内可访问）。

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