logo标签列表

在Internet Explore IE 11中出现SCRIPT5009错误：'id'未定义

javascriptinternet-explorer-11
3

我有一个非常简单的脚本（setUser），当点击按钮时调用。这个脚本在Chrome中工作正常，但在IE 11中出现控制台错误。另一个奇怪的事情是，只有在开发工具打开时才会出现该错误。如果devtool没有打开，它就可以正常工作。

错误为：- 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>

一个简单的解决方法是在脚本下面声明一个变量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”的输出。
实际结果是：脚本错误，JS错误：“id未定义”。
1
this.id 能用吗？否则你可以使用 JavaScript 解决方法。 - Anis R.
1
不要将onclick属性放在HTML中的好理由。使用.addEventListener（'click'，function（event）{...}）。然后可以使用event.target.id或event.target.getAttribute（“id”）;获取id，因此您不需要单独存在的变量。试图弄清楚为什么它在Chrome中有效但在IE11中无效。 - Shilly
@AnisR。是的，this.id可以工作，谢谢。但这是一个已知问题吗？有没有文档可以参考？看起来这是一个常见的问题。 - Vishal Patil
@Shilly，是的，谢谢您的反馈，但我想知道这背后的原因或者有没有任何文档提到这个问题。 - Vishal Patil
3个回答
2

id 就是未定义，正如错误信息所说。如果你声明它，错误就会消失，但它不会像你期望的那样运行。如果你声明它，它将存在于值为 undefined 的状态。你可能想要的是：

onclick="setUser(this.id)"

this.id 表示按钮上下文，而仅仅的 id 则试图在全局上下文中查找。如果出现错误，则 id 没有被声明。

var id; // or var id=undefined;

声明它，但不定义它，这样浏览器至少知道它是一个变量。通过说 id 未定义，Explorer 意味着它没有被声明。

我相信原因是浏览器搜索变量和命名元素（通过名称或 id 属性引用；这不是标准，但浏览器会这样做），实际上在全局上下文中不存在，并且通过引用查找并且 Explorer 显然无法处理此情况。如果它被声明为 var，javascript 就知道它不是命名元素引用。

下面的示例显示了非标准行为：它应该以错误 test 未定义 结束（它确实没有定义），但浏览器却说 hello。

<input id="test" value="hello">
<script>
  alert(test.value);
</script>
1
在IE11中无法工作的原因是由于您在抛出错误的代码块中未为HTML文档指定doctype。
如果我像您展示的解决方法一样在HTML开头添加，则它也可以在IE11中正常工作，而不需要添加var id;
具体原因我不知道，但是没有doctype，IE将以quirks模式运行页面。这似乎会在浏览器尝试将onclick="setUser(id)"解析为有效JS代码时弄乱函数作用域的确定。
如果doctype正确且页面因此可以在正确的模式下运行，则不会发生这种情况。如果浏览器的HTML引擎不必在使用之前将HTML字符串setUser(id)解析为有效的JS代码，则也不会发生这种情况。因此，现在的标准是不在HTML标记上使用内联事件处理程序属性，因此这种问题已经不常见了。
因此，在可能的情况下优先选择使用javascript进行显式事件绑定，以避免遇到像这样的问题，其中一个完全不相关的部分（doctype）会破坏您的代码。
<!DOCTYPE html> 在我添加时确实存在，我错过了它。 - Vishal Patil
仍然看到这个问题。 - Vishal Patil
这就是解决我的问题的方法。没有doctype，每次都会出现“SCRIPT5009：'id'未定义”的错误。有了doctype，在按下“允许脚本”之前先打开控制台，IE11中的所有内容都可以正常工作。如果我在之后打开控制台，有时会再次出现错误。我必须每次清除缓存才能在版本之间切换。因此，这显然与在HTML5模式下如何解析函数范围在IE11中有关，而不是其他模式。这又与IE11的编码方式有关。因此，这个问题在Chrome中不存在。 - Shilly
不错，但如果关闭IE11的开发工具，这个错误就不会出现，我感到震惊。 - Vishal Patil
IE11在调试方面有些奇怪。我在使用控制台方法的其他代码中也遇到了类似的问题。虽然还没有完全弄清楚，但我觉得如果F12开发工具没有打开，控制台好像在IE11中不存在。IE11开发工具的其他部分也不能按预期工作。当我的公司能够切换到Edge并停止支持IE11时，我会很高兴的。 - Shilly
同样的问题，维护IE 11也让我头疼不已。 - Vishal Patil
0

使用 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接