Javascript 错误 Null 不是对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14207922/
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
Javascript Error Null is not an Object
提问by Mark H
Im getting a error in the Web Inspector as shown below:
我在 Web Inspector 中收到错误消息，如下所示：
TypeError: 'null' is not an object (evaluating 'myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}')
Here is my Code (HTML):
这是我的代码（HTML）：
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<script src="js/script.js" type="text/javascript"></script>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="submit" id="myButton" value="Go" />
</form>
Here is the JS:
这是JS：
var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}
Any Idea why I am getting the error?
知道为什么我收到错误吗？
回答by alex
Put the code so it executes after the elements are defined, either with a DOM readycallback or place the source under the elements in the HTML.
放置代码使其在定义元素后执行，或者使用DOM 就绪回调，或者将源代码放在 HTML 中的元素下。
document.getElementById()returns nullif the element couldn't be found. Property assignment can only occur on objects. nullis not an object (contrary to what typeofsays).
document.getElementById()null如果找不到元素，则返回。属性分配只能发生在对象上。null不是一个对象（与typeof所说的相反）。
回答by Munish Poonia
Any JS code which executes and deals with DOM elements should execute after the DOM elements have been created. JS code is interpreted from top to down as layed out in the HTML. So, if there is a tag before the DOM elements, the JS code within script tag will execute as the browser parses the HTML page.
任何执行和处理 DOM 元素的 JS 代码都应该在创建 DOM 元素之后执行。JS 代码从上到下解释为 HTML 中的布局。因此，如果在 DOM 元素之前有一个标签，脚本标签中的 JS 代码将在浏览器解析 HTML 页面时执行。
So, in your case, you can put your DOM interacting code inside a function so that only function is defined but not executed.
因此，在您的情况下，您可以将 DOM 交互代码放在函数中，以便仅定义函数但不执行函数。
Then you can add an event listener for document load to execute the function.
然后您可以为文档加载添加一个事件侦听器以执行该功能。
That will give you something like:
这会给你类似的东西：
<script>
function init() {
var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
}
}
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
document.addEventListener('readystatechange', function() {
if (document.readyState === "complete") {
init();
}
});
</script>
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="button" id="myButton" value="Go" />
</form>
Fiddle at - http://jsfiddle.net/poonia/qQMEg/4/
回答by Visal Chhourm
I think the error because the elements are undefined ,so you need to add window.onloadevent which this event will defined your elements when the window is loaded.
我认为错误是因为元素未定义，因此您需要添加window.onload事件，该事件将在加载窗口时定义您的元素。
window.addEventListener('load',Loaded,false);
function Loaded(){
var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}
}
回答by Bryan CS
Try loading your javascript after.
之后尝试加载您的 javascript。
Try this:
尝试这个：
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="submit" id="myButton" value="Go" />
</form>
<script src="js/script.js" type="text/javascript"></script>
回答by earlonrails
I agree with alex about making sure the DOM is loaded. I also think that the submit button will trigger a refresh.
我同意亚历克斯关于确保加载 DOM 的意见。我也认为提交按钮会触发刷新。
This is what I would do
这就是我会做的
<html>
<head>
<title>webpage</title>
</head>
<script type="text/javascript">
var myButton;
var myTextfield;
function setup() {
myButton = document.getElementById("myButton");
myTextfield = document.getElementById("myTextfield");
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}
}
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName("h2")[0].innerHTML = greeting;
}
</script>
<body onload="setup()">
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="button" id="myButton" value="Go" />
</form>
</body>
</html>
have fun!
玩得开心！
