Question

我有一个非常简单的脚本（setUser），单击按钮即可调用。此脚本在chrome中工作正常，但在IE 11中出现控制台错误。另一个奇怪的事情是我只有在打开开发工具时才遇到该错误。如果未打开开发工具，它会很好地工作。

错误是：- SCRIPT5009：“ id”未定义

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function setUser(eventType){
            console.log(eventType);
        }
    </script>
</head>
<body>
    <button id="vish" onclick="setUser(id)" style="height:40px;width:200px">Click Me</button>
</body>
</html>

一个简单的解决方法是声明一个 var id;只是在脚本下方。但是我需要有适当的书面证明，为什么它在ie11中不起作用，而在chrome中也可以。而且是比我尝试过的更好的解决方案

解决方法：-通过在顶部添加var id

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var id;
        function setUser(eventType){
            console.log(eventType);
        }
    </script>
</head>
<body>
    <button id="vish" onclick="setUser(id)" style="height:40px;width:200px">Click Me</button>
</body>
</html>

预期：- 当在ie11中打开开发工具并且单击按钮时，我们应该将控制台日志显示为“ vish”

实际结果：- SCRIPT5009：“ id”是未定义的js错误

Answer 1

如错误消息所述，

id只是未定义。如果声明它，该错误就消失了，但是它的行为不会像您预期的那样。如果声明它，则它的值未定义。你可能想要

onclick="setUser(this.id)"

this.id表示按钮上下文，而简单的id则尝试在全局上下文中找到它。如果出现错误，{<1}}不会声明，而

id

声明它，并将其保持未定义状态，因此浏览器至少知道它是一个变量。通过说 id未定义，资源管理器表示未声明。

我认为原因是浏览器会搜索变量和命名元素（由name或id属性引用；这不是标准的，但是浏览器会这样做），而实际上在全局上下文并通过引用进行查找，而Explorer显然无法处理这种情况。如果将其声明为 var ，则javascript会知道它不是命名元素引用。

下面的示例显示了非标准的行为：它应该以错误 test未被定义（实际上不是）结束，但是浏览器会说 hello 。

var id; // or var id=undefined;

Answer 2

它在IE11中不起作用的原因是因为您没有在引发错误的代码块中为HTML文档指定文档类型。

如果我将<!DOCTYPE html>添加到HTML的开头，如您所显示的解决方法；它对我来说也可以在IE11中使用，而无需添加var id;

确切原因我未知，但是如果没有doctype，IE将以怪癖模式运行页面。当浏览器尝试将onclick="setUser(id)"解析为有效的JS代码时，这似乎弄乱了函数范围的确定。

如果文档类型正确，则不会发生这种情况，因此可以在正确的模式下运行页面。如果浏览器HTML引擎在使用前不必将HTML字符串setUser(id)解析为有效的JS代码，也不会发生这种情况。因此，这不再是一个普遍的问题，因为如今的标准是不要在HTML标签上使用内联事件处理程序属性。

因此，在可能的情况下，最好使用javascript进行显式事件绑定，以免发生此类问题，其中完全不相关的部分doctype会弄乱您的代码。

Answer 3

使用onclick="setUser(this.id)"应该可以。

但是，更干净的解决方法是用JavaScript执行所有onclick处理：

onload = function() {
  var buttons = document.getElementsByTagName("button");
  for(var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
      console.log(this.id);
    }
  }
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="vish" style="height:40px;width:200px">Click Me</button>
    <button id="vish2" style="height:40px;width:200px">Click Me 2</button>
</body>
</html>

正在获取SCRIPT5009：Internet Explore IE 11中未定义“ id”

3 个答案: