Q&A
（質問文は編集できます）HTMLも提示してください。また、質問文のHTML/JavaScriptはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
プログラミング初心者です。
ドットインストールの動画をみながら勉強しています。
どこかが間違っていると思うのですが、どういう意味で間違っているかわかりません。
申し訳ございませんが、教えていただけると助かります。
前提・実現したいこと
ドットインストールのJavaScriptでおみくじを作ろうを実践しています。
main.jsにクリックしてランダムにおみくじの結果を出るように設定したい。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
クリックしても文字が出ません。
コンソールでは以下のアラートが出ています。
Unable to get property 'addEventListener' of undefined or null reference
該当のソースコード
JavaScript
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>おみくじ</title> 7 <link rel="stylesheet" href="css/styles.css"> 8</head> 9 10<body> 11 <script src="js/main.js "></script> 12</body> 13<div id="btn">?</div> 14 15</html> 16
'use strict'; { const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const results = ['大吉', '中吉', '凶']; const n = Math.floor(Math.random() * 3); btn.textContent = results[n]; // switch (n) { // case 0: // btn.textContent = '大吉'; // break; // case 1: // btn.textContent = '中吉'; // break; // case 2: // btn.textContent = '凶'; // break; // } }); }
補足情報（FW/ツールのバージョンなど）
OS:Windows10
ブラウザ：Edge
ここにより詳細な情報を記載してください。
>プログラミング初心者です。
「初心者アイコン」を質問につけられます。タイトルや本文中に含む必要はありません。
HTMLも追記してください。
あと。コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
回答3件
0
ベストアンサー
まず "Unable to get property 'addEventListener' of undefined or null reference" というエラーは日本語で言うと「(btnには)'addEventListener'というプロパティは定義されていないか、空っぽですよ」ということになります。この時点でbtnの中身がおかしいことが想定されます。
ここでコード4行目を見直します。
const btn = document.getElementById('btn');とされていますがgetElementById() は指定したIDの要素が存在しない場合は null が返る事になっています。
* ~~~addEventListenerを追加したい要素のIDが間違っていないか ("btn"ではなく"button"と書いていませんか？)~~~ * `<script>`をaddEventListenerを追加したい要素よりも上に置いていないか(補足参照) #### 追記 回答を書いている間にソースコードが追加されていてよかったです。今回の場合は追加したい要素よりも先にJSのコードを置いたことによりJSが要素を参照できないエラーでした。 また重箱の隅をつつくようですが、`<div id="btn">`が`</body>`より後ろにあるとHTMLをしては誤りです。 ですので今回の場合は ``` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>おみくじ</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="btn">?</div> <!-- 本文は <body> と </body> の中に --> <script src="js/main.js"></script> <!-- (今回の場合は)要素よりも後ろに --> </body> </html> ``` とするとご質問にあったエラーは発生しなくなります。 (ぜひこの機会にHTMLの決まりごともあわせて調べてみてくださいね。) #### ※補足 JSでHTMLの要素を参照するには`<script>`を`</body>`の直前に配置するよう習ったかと思います。 実は`addEventListener()`を用いることで、`<head>`の中にコードを置くことも可能です。その場合は ``` document.addEventListener('DOMContentLoaded',()=>{ /* コード */ }) ``` というようにHTML(DOM)が読み込まれてから実行するように実装しなくてはいけません。 参考：[Document: DOMContentLoaded イベント](https://developer.mozilla.org/ja/docs/Web/API/Document/DOMContentLoaded_event)
投稿2020/05/04 14:27
編集2020/05/04 14:39
総合スコア20
コメントありがとうございます。
おっしゃる通りでした。上記のように訂正しましたら動きました。まだ勉強を始めたばかりですが、少しずつでも前に進めるように日々精進します。ありがとうございました。
0
HTML
1<body> 2 <script src="js/main.js "></script> 3</body> 4<div id="btn">?</div>
divがbodyの外にあるのも突っ込みどころですが、
scriptがdivよりも先にあるので、
divが読み込まれる前にscriptが読まれる
→document.getElementById('btn')は、scriptが読まれた段階で存在していないので取得できない
ということでは。
投稿2020/05/04 14:18
退会済みユーザー
総合スコア0
div、scriptの順番にしたらうまく動きました。ありがとうございます。
仕組みを理解していませんでした。勉強になりました。ありがとうございます。
あなたの回答
tips
プレビュー
