为什么我会收到错误 Uncaught TypeError: Cannot set property 'display' of undefined in Javascript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11444000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why do I get the error Uncaught TypeError: Cannot set property 'display' of undefined in Javascript?
提问by PeanutsMonkey
I am attempting the understand the use of the documentobject type and to challenge myself I am trying to hide all the divtags. When I execute the function, I am returned the error Uncaught TypeError: Cannot set property 'display' of undefinedhowever am unsure what it means exactly. What is undefined?
我正在尝试理解document对象类型的使用并挑战自己我试图隐藏所有div标签。当我执行该函数时，我返回了错误，Uncaught TypeError: Cannot set property 'display' of undefined但不确定它的确切含义。什么是未定义？
The output of the code can be found at http://jsfiddle.net/Bdbtq/
代码的输出可以在http://jsfiddle.net/Bdbtq/找到
Code
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<meta name="robot" content="noindex, nofollow" />
<title>js features</title>
<base href="" />
<link rel="stylesheet" type="text/css" media="all" href="" />
<style type="text/css" media="all">
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<p>This is sample content</p>
</div>
<div id="footer">© 2012</div>
</div>
<script type="text/javascript">
function hideMe() {
//hide all div elements
var div = document.getElementsByTagName("div");
for(var i = 0; i < div.length; i = i + 1) {
div.style.display="none";
}
}
</script>
<p onClick="hideMe();">Click to hide</p>
</body>
</html>
回答by Matt Greer
getElementsByTagNamereturns an array. So you need:
getElementsByTagName返回一个数组。所以你需要：
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i = i + 1) {
divs[i].style.display="none";
}
回答by grc
Div is an array of elements, not a single element. Try this:
Div 是一个元素数组，而不是单个元素。试试这个：
for(var i = 0; i < div.length; i = i + 1) {
div[i].style.display="none";
}
I think it would be easier to avoid these mistakes if you call your variable divs, or something similar that indicates that it isn't an element.
我认为，如果你调用变量divs或类似的东西来表明它不是一个元素，那么避免这些错误会更容易。
回答by Michael Berkowski
Your variable divis at this point a node list, not a single variable, as getElementsByTagName()returns a node list. You need to access it via its array index from your loop as in div[i]
此时您的变量div是节点列表，而不是单个变量，因为getElementsByTagName()返回节点列表。您需要通过循环中的数组索引访问它，如div[i]
for(var i = 0; i < div.length; i = i + 1) {
// div[i] holds the current loop iteration
div[i].style.display="none";
}
