Javascript错误Null不是对象

Question

我在Web Inspector中收到错误,如下所示:

TypeError: 'null' is not an object (evaluating 'myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);

return false;

}')

这是我的代码(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>

这是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;

}

任何想法为什么我收到错误？

Answer 1

放置代码,使其在定义元素后执行,或者使用DOM ready回调,或者将源放在HTML中的元素下.

document.getElementById()null如果找不到元素,则返回.属性分配只能在对象上进行.null不是一个对象(与typeof所说的相反).

Answer 2

任何执行和处理 DOM 元素的 JS 代码都应该在创建 DOM 元素之后执行。JS 代码从上到下解释为 HTML 中的布局。因此，如果在 DOM 元素之前有一个标签，脚本标签中的 JS 代码将在浏览器解析 HTML 页面时执行。

因此，在您的情况下，您可以将 DOM 交互代码放在函数中，以便仅定义函数但不执行函数。

然后您可以为文档加载添加一个事件侦听器以执行该功能。

这会给你类似的东西：

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

小提琴 - http://jsfiddle.net/poonia/qQMEg/4/