1. ホーム
  2. javascript

[解決済み] Javascript Error Null is not an Object.

2022-02-12 23:05:15

質問

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 と書いてある)。