Javascript错误Null不是一个对象

Javascript Error Null is not an Object

本文关键字：一个对象 Null 错误 Javascript      更新时间：2023-09-26

我在Web检查器中得到错误，如下所示:

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

知道为什么我得到错误吗?

将代码放在元素定义后执行，可以使用DOM就绪回调，也可以将源代码放在HTML中的元素下面。

如果找不到元素，

document.getElementById()返回null。属性赋值只能发生在对象上。null不是一个对象(与typeof相反)。

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

因此，在您的情况下，您可以将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>

Fiddle at - http://jsfiddle.net/poonia/qQMEg/4/

尝试加载javascript。

试试这个:

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

我认为这个错误是因为元素是未定义的，所以你需要添加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;
    }
    }

我同意alex关于确保DOM被加载的观点。我还认为提交按钮将触发刷新。

这就是我要做的

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

玩得开心!

相关文章：