Chrome和其他浏览器是如何初始化这个JavaScript变量的？

我正在开发一个购物车，它要求用户在“查看订单”并最终购买之前选中表示同意服务条款的复选框

我必须使用JavaScript来完成这项工作，方法是获取包含“review order”和“continue shopping”按钮的元素，并将内部HTML更改为我需要的内容。我必须这样做，因为我使用的购物车不能完全控制购物车源代码中的这些元素

这是我最初提出的代码，它适用于Chrome、Edge和其他浏览器，但不适用于IE

var x=document.getElementById（'CHECKOUT_LINKS'）；
x、 innerHTML='我同意
'；
document.addEventListener（'DOMContentLoaded'，function（）{
document.querySelector（“#tosBox”）.addEventListener（'change'，changeHandler）；
});
var checkbox=document.getElementById（“tosBox”）；
checkbox.checked=true；
checkbox.checked=false；
函数changeHandler（）{
如果（！tosBox.checked）
警惕（“您必须同意服务条款”）；
}
函数点击器（）{
如果（！tosBox.checked）
警惕（“您必须同意服务条款”）；
否则{//转到查看订单页面
}
}

正如您所见，

CHECKOUT\u链接

元素的内部HTML在页面加载时被动态更改为我需要的内容。主要的一点是添加

id=“tosBox”

元素，然后捕获点击

id=“reviewOrderButton”

元素，并通过简单的JS函数

changeHandler（）

和

clicker（）

对其进行过滤

在IE开发者工具中，当我单击

id=“reviewOrderButton”

元素时，控制台报告

'tosBox'未定义。这在查看
var checkbox=document.getElementById（“tosBox”）
创建的变量称为
checkbox
，但我稍后尝试使用的变量称为
tosBox
。我只是简单地将checkbox改为tosBox，然后IE上的一切都正常了

令我震惊的是，最初的代码在Chrome和Edge上运行。它是如何工作的？我是否应该期望它能正常工作？IE有问题吗？
请参阅。简而言之，DOM元素会自动添加到全局范围。@Steve Wow，我从来没有期望元素id会自动成为全局变量。但从我读到的来看，我本应该这么做，但显然不是。是的，发现这一点非常令人惊讶。更有理由使用短绒。我还尝试在ID中使用连字符（如
tos-box
），这样我就不会意外地访问它们了。@Steve是的，我可能会开始类似的操作。我不能说我听说过皮棉，但经过一番探索和了解，我可能也会使用它。