Cannot read property 'style' of null, Cannot read property 'innerHTML' of null理由を知りたい

日本語のボタンと英語のボタンを表示させて２つボタンを押したら正解か不正解かを表示させるアプリを作っているのですが
Cannot read property が出てきてしまい詰まっています。
①javascriptのcheck関数内の発言の処理のところでsound.textのところでdocument.getElementById(en${matchCard[1]}).innerHTML
と書いてうまく言葉を取り出せているのになぜか
var text = document.getElementById(jp${matchCard[0]}).innerHTML
と同じ関数内でほぼ同じ処理をすると
Cannot read property 'innerHTML' of null
とエラーが出ます。
②check関数の正解の処理のところで
document.getElementById(jp${matchCard[0]}).style.visibility = "hidden";
document.getElementById(en${matchCard[0]}).style.visibility = "hidden";
とやるとうまくボタンが隠れ処理ができているのに同じ関数内で（else文で）
document.getElementById(jp${matchCard[0]}).style.backgroundColor = "rgb(240, 113, 113)";
document.getElementById(en${matchCard[1]}).style.backgroundColor = "aquamarine";
とするとなぜか
Cannot read property 'innerHTML' of null
とstyleが読み込めません。なぜ同じ関数内で片方はstyleが読み込めるのにもう片方ではstyleが読み込めないのでしょうか。関数のスコープの部分の自分の理解が不十分なのが原因かもしれません。

この２つの理由詳しくを知りたいです。ご教示よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>英語アプリ</title>
7  <link rel="stylesheet" href="index.css">
8</head>
9<body>
10  <div id="topArea">
11    <button onclick="dailyConversation()">日常会話</button>
12    <button onclick="word()">単語</button>
13  </div>
14  <div id="mainArea">
15    <div id="japanArea"></div>
16    <div id="englishArea"></div>
17  </div>
18    <script src="index.js"></script>
19</body>
20</html>

JavaScript
1'use strict';
2
3function dailyConversation() {
4  var jpArr = [
5  'こんにちは', 'おはようございます', 'こんばんは'
6  ];
7  var enArr = [
8    'Hello', 'Good morning', 'Good evening'
9  ];
10  display(jpArr, enArr);
11}
12
13function word() {
14  var jpArr = [
15    '一', '二', '三'
16  ];
17  var enArr = [
18  'one', 'two', 'three'
19  ];
20  display(jpArr, enArr);
21}
22
23var jpArea = document.getElementById('japanArea');
24var enArea = document.getElementById('englishArea');
25// Map作成
26const JPmap = new Map([]);
27const ENmap = new Map([]);
28
29function display(jpArr, enArr) {
30  for (var i = jpArr.length - 1; i >= 0; i--) {
31    var JPword = jpArr[i];
32    var JPindex = jpArr.indexOf(`${JPword}`);
33    JPmap.set(`${JPword}`, JPindex);
34
35    var ENword = enArr[i];
36    var ENindex = enArr.indexOf(`${ENword}`);
37    ENmap.set(`${ENword}`, ENindex);
38  }
39
40  // 日本語ボタンを表示
41  for (var i = jpArr.length - 1; i >= 0; i--){
42    var rand = Math.floor( Math.random() * ( i + 1 ) );
43    var jpWord = jpArr[rand];
44    var jpIndex = JPmap.get(`${jpWord}`);
45    jpArea.insertAdjacentHTML('afterbegin', `<button id="jp${jpIndex}" class="jpButton" onclick="JPcheck('${jpIndex}')">${jpWord}</button>`);
46    [jpArr[i], jpArr[rand]] = [jpArr[rand], jpArr[i]];
47  }
48
49  // 英語ボタンを表示
50  for (var i = enArr.length - 1; i >= 0; i--) {
51    var rand = Math.floor( Math.random() * ( i + 1 ) );
52    var enWord = enArr[rand];
53    var enIndex = ENmap.get(`${enWord}`);
54    enArea.insertAdjacentHTML('afterbegin', `<button id="en${enIndex}" class="enButton" onclick="ENcheck('${enIndex}')">${enWord}</button>`);
55    [enArr[i], enArr[rand]] = [enArr[rand], enArr[i]];
56  }
57}
58
59var matchCard = [];
60function JPcheck(jpIndex) {
61  matchCard.unshift(jpIndex);
62  document.getElementById(`jp${jpIndex}`).style.backgroundColor = "rgb(247, 183, 9)";
63  jpArea.style.pointerEvents = "none";
64  if (matchCard.length == 2) {
65    check();
66  } else {
67    return;
68  }
69}
70function ENcheck(enIndex) {
71  matchCard.push(enIndex);
72  document.getElementById(`en${enIndex}`).style.backgroundColor = "rgb(247, 183, 9)";
73  enArea.style.pointerEvents = "none";
74  if (matchCard.length == 2) {
75    check();
76  } else {
77    return;
78  }
79}
80function check() {
81  console.log(matchCard);
82  if (matchCard[0] == matchCard[1]) {
83    //発言の処理
84    var sound = new SpeechSynthesisUtterance();
85    sound.text = `${document.getElementById(`en${matchCard[1]}`).innerHTML}`;
86    sound.lang = 'en-US';
87    speechSynthesis.speak(sound);
88    alert('正解です！');
89    jpArea.style.pointerEvents = "";
90    enArea.style.pointerEvents = "";
91    document.getElementById(`jp${matchCard[0]}`).style.visibility = "hidden";
92    document.getElementById(`en${matchCard[0]}`).style.visibility = "hidden";
93    matchCard = [];
94    var text = document.getElementById(`jp${matchCard[0]}`).innerHTML;
95    console.log(text);
96  } else {
97    alert('不正解です！');
98    matchCard = [];
99    document.getElementById(`jp${matchCard[0]}`).style.backgroundColor = "rgb(240, 113, 113)";
100    document.getElementById(`en${matchCard[1]}`).style.backgroundColor = "aquamarine";
101    jpArea.style.pointerEvents = "";
102    enArea.style.pointerEvents = "";
103  }
104}

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

回答1件

ベストアンサー

誤りの部分

JavaScript
1    alert('不正解です！');
2    matchCard = []; // ここで初期化したらその後matchCard[0]に値はないよ

これもやめた方がよい

JavaScript
1var jpArea = document.getElementById('japanArea');
2var enArea = document.getElementById('englishArea');

この時点でまだ<div id='japanArea'>と<div id='englishArea'>は生成されていない
Bodyのonload後設定するようにして下さい

投稿2020/09/19 05:45

kuma_kuma_

総合スコア2506

takespring

2020/09/20 01:15

ご回答ありがとうございます。少し勘違いしていたようでした。とても参考になりました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Cannot read property 'style' of null, Cannot read property 'innerHTML' of null理由を知りたい

関連した質問