status.style未定义 [英] status.style is undefined
问题描述
浏览器的控制台显示:
TypeError: status.style is undefined, line 12
var status;
function output(msg,type="info"){
status.innerHTML=msg;
switch(type){
case "info":
status.style.background=undefined;
break;
case "warning":
status.style.background="#cccc33";
break;
case "error":
status.style.background="#ff0033";
break;
}
}
function init(){
status=document.getElementById("status");
output("Document loaded","error");
}
window.onload=init;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>Drag and drop upload</title>
<link href="css/style.css" rel="stylesheet" type="text/css" >
<script src="js/script.js" type="text/javascript"> </script>
</head>
<body>
<header>
<h1>Drag & drop upload</h1>
</header>
<div id="main">
<div id="status">Status</div>
<div id="inner"> </div>
</div>
<footer>© Copyright 2015</footer>
</body>
</html>
我知道这是如此简单和基本，但是我不得不问.经过测试，我认为这是一个范围错误.那怎么了?
I know this is so simple and basic but I got no other choice but to ask. As I tested I think this is a scope error. So what’s the problem?
推荐答案
您实际上并不是在指您的 status 变量，而是在 window.status 中.
You’re not actually referring to your status variable, but to window.status.
对此有两种可能的解决方案:
There are two possible solutions to this:
- 根本不使用
status，而是使用另一个变量名，或者 - 将代码包装在IIFE中，如下所示:
(function(){…}());
- Simply don’t use
status, but another variable name instead, or - Wrap your code in an IIFE like this:
(function(){…}());
window.status 是一个特殊属性:它具有WebIDL绑定.在这种情况下，这基本上意味着属性的值会秘密更改和更新.在 window.status 的情况下，每当为其分配值时，该值就会转换为字符串.这就是为什么 console.log(status)产生字符串
window.status is a special property: it has a WebIDL binding. In this case, this basically means that the value of the property is changed and updated secretly. In the case of window.status, whenever a value is assigned to it, it is turned into a string. That’s why console.log(status) yields the string
"[object HTMLDivElement]"
而不是
<div id="status">
只有HTML元素具有 style 属性，而不具有字符串.这就是为什么 status.style 是 undefined 的原因.
And only HTML elements have the style property, not strings. That’s why status.style is undefined.
如果您访问具有定义值的未定义属性，那么这不是问题.这就是为什么 status.innerHTML 没有引发错误的原因.但是使用 status.style.background 时，您试图访问 undefined 值的未定义属性.
That’s not an issue if you access an undefined property of a defined value. That’s why status.innerHTML didn’t throw the error. But with status.style.background, you tried to access an undefined property of an undefined value.
如果您使用立即可调用的函数表达式(IIFE)，则可以使用所需的任何变量名:
If you use immediately invokable function expressions (IIFEs), you can use whichever variable names you want:
(function(){
var status;
// etc.
})();
window.status 用于设置窗口的状态文本(当时，当浏览器具有状态栏时).
window.status was used to set the status text of a window (back then, when browsers had status bars).
这篇关于status.style未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
