Javascript 错误 Null 不是对象

IT技术 javascript html
2021-03-11 19:31:58

我在 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;

}

知道为什么我收到错误吗？

5个回答

放置代码，使其在元素定义后执行，或者使用DOM 就绪回调，或者将源代码放在 HTML 中的元素下。

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

@MarkH 我可以，但这里有一个更好的解释。
2021-04-17 19:31:58
嗨亚历克斯感谢您的快速回复我移动了来源。作为 JavaScript 新手，您能解释一下什么是 DOM 就绪回调吗？但感谢您的回答它有帮助:)
2021-04-19 19:31:58
当我问我关于理解 Alex 所说的“将源代码放在 HTML 中的元素下”是什么意思的问题时，我没有处理下面 Fiddle 的回复。现在我明白了。
2021-04-19 19:31:58
我遇到了这个错误 - 我不清楚这个答案。Alex 所说的“将源代码放在 HTML 中的元素下”是什么意思？
2021-05-04 19:31:58

任何执行和处理 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/

我认为错误是因为元素未定义，因此您需要添加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;
    }
    }

之后尝试加载您的 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>

我同意亚历克斯关于确保加载 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>

玩得开心！

其它你可能感兴趣的问题
上一篇获取本月的第几周 下一篇Javascript 的`window.resizeTo` 不起作用