クイズをJavaScriptで作成しましたが、問題文のみ更新されません。

HTMLのid="js-question"部分をJavaScriptで取り出しクイズに正解するたびに問題文・選択肢・答えが更新されるようにしたいのですが、上手くいきません。選択肢と答えは更新されていくのに、問題文だけが更新されないのです。
申し訳ございませんが原因の検討が付かなくなりました。どなたかアドバイス頂けたら助かります。

<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <!-- Place favicon.ico in the root directory -->



  <meta name="theme-color" content="#fafafa">
</head>

<body>
<div class="container">
    
    <div class="jumbotron mt-5">
      <div class="d-flex justify-content-center">
        <div id="js-question" class="alert alert-primary" role="alert">
          A simple primary alert—check it out!
        </div>
      </div>
      
      <div id="js-items" class="d-flex justify-content-center">
        <div class="m-2">
          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
        </div>
      </div>
    </div>
  </div>
  
  <script src="app.js"></script>
</body>

</html>

const
1  {
2    question : 'マインクラフトを題材にした～～～～？',
3    answers : [
4      'ヒカキンTV',
5      'セイキンTV',
6      '～～～～',
7      'グレープポコ'
8    ],
9    correct : '～～～～'
10  },
11  {
12    question : 'かよっていた　ようちえん　の　なまえは？',
13    answers : [
14      '〇〇　ようちえん',
15      '××　ようちえん',
16      '△　ようちえん',
17      '□ようちえん'
18    ],
19    correct : '〇〇　ようちえん'   
20  },
21  {
22    question : 'ままの　いちばんすきなりょうりは？',
23    answers : [
24      'そうめん',
25      'にく',
26      'やさい',
27      'ぞうさん'
28    ],
29    correct : 'にく'
30  }
31];
32
33let quizIndex = 0;
34const quizLength = quiz.length;
35let score = 0;
36
37document.getElementById('js-question').textContent = quiz[quizIndex].question ;
38
39const $button = document.getElementsByTagName('button');
40let buttonLength = $button.length;
41
42
43// document.getElementsByTagName('button')[0].textContent = answers[0];
44// document.getElementsByTagName('button')[1].textContent = answers[1];
45// document.getElementsByTagName('button')[2].textContent = answers[2];
46// document.getElementsByTagName('button')[3].textContent = answers[3];
47
48// $button[0].textContent = answers[0];
49// $button[1].textContent = answers[1];
50// $button[2].textContent = answers[2];
51// $button[3].textContent = answers[3];
52
53//定数の文字列をHTMLに反映させる（問題文、選択しを定義）
54const setupQuiz = ()=>{
55  let buttonIndex = 0;
56  while(buttonIndex < buttonLength){
57  //ここに命令
58  $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex]
59  buttonIndex++;
60  }
61}
62
63setupQuiz();
64
65const clickHandler = (e) => {
66  if(quiz[quizIndex].correct === e.target.textContent){
67    window.alert('正解！');
68    
69    score++;
70  }else{
71    window.alert('不正解');
72  }
73
74  quizIndex++;
75
76  if(quizIndex < quizLength){
77    setupQuiz();
78  }else{
79    window.alert('卒業です！！！！★あなたの正解は' + score + '/'　+ quizLength +'でした！');
80  }
81
82};
83
84//ボタンクリックしたら正誤判定
85let handlerIndex = 0;
86while (handlerIndex < buttonLength){
87handlerIndex++;
88}
89
90
91
92$button[0].addEventListener('click', (e)=>{
93  clickHandler(e);
94});
95
96$button[1].addEventListener('click', (e)=>{
97  clickHandler(e);
98});
99
100$button[2].addEventListener('click', (e)=>{
101  clickHandler(e);
102});
103
104$button[3].addEventListener('click', (e)=>{
105  clickHandler(e);
106});
107
108
109コード

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

回答1件

ベストアンサー

document.getElementById('js-question').textContent = quiz[quizIndex].question ;

というのが問題文を埋めているように見受けられますが、回答と同じタイミングのところに書けばいいのではないでしょうか。
例えば //ここに命令とかってい書かれているあたりに上のを埋め込んでみればいいのかと思います。

投稿2021/03/21 08:02

tomomo

総合スコア430

AlsaKolpiiya

2021/03/21 08:05

回答ありがとうございます！あと2時間ほどで用事が終わりますので、その後試してみます！

AlsaKolpiiya

2021/03/21 10:07

出来ました！確かにwhile分の中に入れてあげないと問題が変わり様がないですね！良かったです。子供たちとこれで遊べます。自分の間違いに気付けるようになれば強いですね。。。 const setupQuiz = ()=>{ let buttonIndex = 0; while(buttonIndex < buttonLength){ //ここに命令 document.getElementById('js-question').textContent = quiz[quizIndex].question ; $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex] buttonIndex++; } }

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