自分用メモ
JavaScriptでボタンクリックのイベント発火させようとしたところ、consoleに以下のエラーが出た。
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
ちなみにその時のコードがこちら
index.html
<!doctype html>
<html lang=”ja”>
<head>
<title>Index </title>
<meta charse=”utf8″/>
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="input-area">
<input id="add-text" placeholder="TODOを入力" />
<button id="add-button">追加</button>
</div>
</body>
</html>
index.js
const onClickAdd = () => {
alert('OK')
}
document
.getElementById("add-button") //
.addEventListner("click", ()=> onClickAdd() );
#原因
原因は、scriptを読み込ませる位置だった模様。
index.htmlが順番に読み込まれていき、id="add-button"のDOMを生成する前に、index.jsが読み込まれid="add-button"に対し、クリックイベントを発火させようとし、DOMが無いのでエラーになるというものだった。
#対策
scriptを読み込ませる位置を一番後ろに持ってくるとでエラー解消した。
index.html
<!doctype html>
<html lang=”ja”>
<head>
<title>Index </title>
<meta charse=”utf8″/>
</head>
<body>
<div class="input-area">
<input id="add-text" placeholder="TODOを入力" />
<button id="add-button">追加</button>
</div>
</body>
</html>
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">