innerHTMLがうまく動作しません

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<title>おみくじ</title>
5
6</head>
7<body>
8<h1>おみくじ</h1>
9<button id="btn">おみくじスタート</button>
10<div id="dsp"></div>
11
12    <script>
13       let kujis =["大吉","吉","中吉","小吉","末吉","凶","大凶"];
14       let kuji = Math.floor(Math.random()*kujis.length);
15       let btn= document.getElementById("btn");
16       let disp = document.getElementById("disp");
17       
18       btn.addEventListener("click",function(){
19            
20            disp.innerHTML = kujis[kuji];
21        
22       })
23　　
24    </script>
25
26</body>
27</html>
28```ボタンをクリックしても動作しません。
29ChromeのエラーメッセージにはCannot set property "innerHTML"of nullと表示されています。「innerHTMLの値が空白なので値をsetできない」というような意味なのかも知れませんが、色々調べても分かりませんでした。
30上記の記述をどう変えればよいのでしょうか？よろしくお願いします。

退会済みユーザー

2020/04/19 07:27

タイポしてるので正常なコードを提示してください disp / dsp

beginner001

2020/04/19 21:19

dispをdspに統一しました。動作しました。ありがとうございました。「タイポ」という言葉が初めて目にしたので調べて納得しました。

行動規範の内容に同意します

回答2件

<div id="dsp"></div>
id名がdispでなくdspになっています。

投稿2020/04/19 07:21

soliste16

総合スコア757

ベストアンサー

こちらのコードで動くようになりましたが如何でしょうか。
修正箇所はコメントアウトに記載してます。

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<title>おみくじ</title>
5
6</head>
7<body>
8<h1>おみくじ</h1>
9<button id="btn">おみくじスタート</button>
10<div id="disp"></div><!--修正①-->
11
12    <script>
13       let kujis =["大吉","吉","中吉","小吉","末吉","凶","大凶"];
14       let btn= document.getElementById("btn");
15       let disp = document.getElementById("disp");
16
17       btn.addEventListener("click",function(){
18            let kuji = Math.floor(Math.random()*kujis.length);　// 修正②
19            disp.innerHTML = kujis[kuji];
20       });
21    </script>
22
23</body>
24</html>