【JavaScript基礎】クイズアプリがうまく動かない。

お世話になっております。
現在JavaScriptを使って、以下のようなクイズアプリを作成しています。

しかし現在の動作は、解答ボタンを押しても以下の様に動きません。

目前の必要な機能をつけ足していった結果、どこが悪いのかわかりません。（泣）
詳しい方、わかる方がいたら是非教えてください。お願いします！

●ソースコード

index.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>Document</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <div id="container"></div>
11  <script src="js/quiz.js"></script>
12  <script src="js/main.js"></script>
13</body>
14</html>

style.css
1.quiz {
2  position: absolute;
3  left: 0px;
4  top: 0px;
5  width: 100%;
6  z-index: 1;
7  opacity: 0;
8  transition: opacity 0.5s;
9}
10
11.active {
12  opacity: 1;
13  z-index: 2;
14}
15
16.content {
17  border-top: 1px solid #000;
18  border-bottom: 1px solid #000;
19  margin: 20px 0;
20  padding: 10px 0;
21}

main.js
1const allPages = document.getElementsByClassName('quiz'); 
2let pageNum = 0;
3
4//次のページをactive状態にする関数
5const showPage = (n) => {
6  allPages[pageNum].classList.remove('active');
7  allPages[n].classList.add('active');
8  pageNum = n;
9
10  if(pageNum === allPages.length) {
11    pageNum = 0;
12  }
13}
14
15//デフォルトページを作成して、activeの状態にする
16const defaultPage = new createQuizElement('ようこそ', '', '', '始めるには以下のボタンをクリックしてね', '開始', '', '', '', 'default');
17defaultPage.createElement();
18showPage(0);
19let buttons = document.querySelectorAll('.btn');
20
21//defaultButtonsのどれかのボタンが押されたらクリックイベント発動
22for(let i = 0; i < buttons.length; i++) {
23  buttons[i].addEventListener('click', () => {
24
25    const getFetchQuizData = () => {
26      return new Promise((resolve, reject) => {
27        //「取得中」の文言を表示
28        const startPage = new createQuizElement('取得中', '', '', '少々お待ちください。', '', '', '', '', 'start');
29        startPage.createElement();
30        console.log(allPages);
31        showPage(1);
32        //クイズデータをfetchして取得
33        const quiz = new Quiz('https://opentdb.com/api.php?amount=10&type=multiple');
34        resolve(quiz.fetchQuizData());
35        reject();
36      });
37    }      
38
39    //取得したクイズデータを表示
40    getFetchQuizData()
41    .then(jsonData => {
42      jsonData.results.forEach((quizdata, index) => {
43        //問題文と内容をすべて作成
44        const qe = new createQuizElement(`問題${index+1}`, `[ジャンル]${quizdata.category}`, `[難易度]${quizdata.difficulty}`, quizdata.question, quizdata.correct_answer, quizdata.incorrect_answers[0], quizdata.incorrect_answers[1], quizdata.incorrect_answers[2], index);
45        qe.createElement();
46      });
47
48      //最終ページを作成
49      const endPage = new createQuizElement('あなたの正答数は〇〇です！', '', '', '再度チャレンジするには以下のボタンをクリック！', 'ホームに戻る', '', '', '', 'end');
50      endPage.createElement();
51      showPage(2);     
52    });     
53
54    //どれかのボタンを押したらイベント発動
55    let buttons = document.querySelectorAll('.btn');
56    for(let i = 0; i < buttons.length; i++) {
57      buttons[i].addEventListener('click', () => {
58        if(i+3 !== allPages.length) {
59          showPage(i+3);
60        } else {
61          showPage(0);
62        }
63      })
64    }
65  });
66}

quiz.js
1class createQuizElement {
2  constructor(title, category, difficulty, content, btn1, btn2, btn3, btn4, uniq) {
3    this.title = title;
4    this.category = category;
5    this.difficulty = difficulty;
6    this.content = content;
7    this.btn1 = btn1;
8    this.btn2 = btn2;
9    this.btn3 = btn3;
10    this.btn4 = btn4;
11    this.uniq = uniq;
12  }
13
14  createElement() {
15    //<div class="quiz"></div>を作成
16    const quizDiv = document.createElement('div');
17    quizDiv.classList.add('quiz');
18    quizDiv.setAttribute('id', this.uniq);
19
20    //titleDivを作成し、quizDivに追加
21    const titleDiv = document.createElement('h2');
22    titleDiv.textContent = this.title;
23    quizDiv.appendChild(titleDiv);
24
25    //categoryDivを作成し、quizDivに追加
26    const categoryDiv = document.createElement('h4');
27    categoryDiv.textContent = this.category;
28    quizDiv.appendChild(categoryDiv);
29
30    //difficultyDivを作成し、quizDivに追加
31    const difficultyDiv = document.createElement('h4');
32    difficultyDiv.textContent = this.difficulty;
33    quizDiv.appendChild(difficultyDiv);
34
35    //contentDivを作成し、quizDivに追加
36    const contentDiv = document.createElement('div');
37    contentDiv.textContent = this.content;
38    contentDiv.classList.add('content');
39    quizDiv.appendChild(contentDiv);
40
41    //button1を作成し、quizDivに追加
42    if(this.btn1 === '') {
43      
44    } else {
45      const btn1 = document.createElement('button');
46      btn1.textContent = this.btn1;
47      btn1.classList.add('btn');
48      quizDiv.appendChild(btn1);
49    };
50    
51    //button2を作成し、quizDivに追加
52    if(this.btn2 === '') {
53      
54    } else {
55      const btn2 = document.createElement('button');
56      btn2.textContent = this.btn2;
57      btn2.classList.add('btn');
58      quizDiv.appendChild(btn2);
59    };
60
61    //button3を作成し、quizDivに追加
62    if(this.btn3 === '') {
63      
64    } else {
65      const btn3 = document.createElement('button');
66      btn3.textContent = this.btn3;
67      btn3.classList.add('btn');
68      quizDiv.appendChild(btn3);
69    };
70
71    //button4を作成し、quizDivに追加
72    if(this.btn4 === '') {
73      
74    } else {
75      const btn4 = document.createElement('button');
76      btn4.textContent = this.btn4;
77      btn4.classList.add('btn');
78      quizDiv.appendChild(btn4);
79    };
80
81    //bodyにquizDivを追加
82    document.getElementById('container').appendChild(quizDiv);
83  }
84}
85
86class Quiz {
87  constructor(url) {
88    this.url = url;
89  }
90  fetchQuizData() {
91    return fetch(this.url)
92    .then(response => {
93      if(response.ok) {
94        return response.json();
95      } else {
96        throw new Error();
97      }
98    })    
99    .catch((error) => console.log(error));
100  }
101}

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

回答1件

ベストアンサー

なんとなくだけどボタンが描画される前に処理を紐づけているように見える。
ボタンはきちんととれてるのでしょうか？

let buttons = document.querySelectorAll('.btn');
alert(buttons.length);

投稿2020/10/06 02:17

tomomo

総合スコア430

退会済みユーザー

2020/10/06 02:25

ありがとうございます。問題を表示させる前に「開始」ボタンをクリックする必要があり、そのためにすべての問題が描画される前にボタンを取得する必要があります。それが原因で問題の解答ボタンをしっかり取得できていないのが原因です。やはりデフォルトページ（最初のページ）のボタンのみ別の要素を割り当てるべきでしょうか？