BinaryDevelop
  1. ホーム

エラー "Cannot set property 'onclick' of null "でJSイベントをトリガーする。

2022-02-25 04:30:53
<パス

JSイベントエラー "プロパティ 'onclick' にnullを設定できません" 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>event</title>
	<script>
		var btn1 = document.getElementById('btn1');
		var demo1 = document.getElementById('demo1');
		// onclick event
		btn1.onclick = function () {
			demo1.innerHTML = 'hello world!
		}
	</script>
</head>
<body>
	<button id="btn1">click me</button>
	<p id="demo1"></p>
</body>
</html>

上記のコードを実行すると、以下のようなエラーが報告されます。

一番下にjsのコードを入れて読み込ませたら、正常に動作するようになりました 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>events</title>
	
</head>
<body>
	<button id="btn1">clickme</button>
	<p id="demo1"></p>

	<script>
		var btn1 = document.getElementById('btn1');
		var demo1 = document.getElementById('demo1');
		// onclick event
		btn1.onclick = function () {
			demo1.innerHTML = 'hello world!
		}
	</script>
</body>
</html>

原因を分析する。
jsコードやjsファイルをheadの間に配置した場合、onclickイベントやonmouseoverイベントがバインドされていると、コンソールに上記のようなエラーが報告されます。これは、ブラウザがhtmlドキュメントをトップダウン順に読み込み、jsコードを実行する前にボタンノードを読み込むからです。ブラウザがトップダウンで解析すると、onclickにバインドされたボタンノードが見つからず、エラーが報告されます。

回避策

  1. jsコードやjsの外部ファイルを一番下に置いて読み込ませる
  2. window.onload = function () {}でjsコンテンツをラップする。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します