多次元配列から要素を取得したい。

■やりたいこと
多次元配列から要素を取得したい。

■問題点
ループの時quizのi番目のanswersから要素を取得するというようにしたいのだがうまく要素を取得できない。

html
1<div class="container">
2    
3    <div class="jumbotron mt-5">
4      <div class="d-flex justify-content-center">
5        <div id="js-question" class="alert alert-primary" role="alert">
6        </div>
7      </div>
8      
9      <div id="js-items" class="d-flex justify-content-center">
10        <div class="m-2">
11          <button type="button" id="js-btn" class="btn btn-primary"></button>
12        </div>
13        <div class="m-2">
14          <button type="button" id="js-btn" class="btn btn-primary"></button>
15        </div>
16        <div class="m-2">
17          <button type="button" id="js-btn" class="btn btn-primary"></button>
18        </div>
19        <div class="m-2">
20          <button type="button" id="js-btn" class="btn btn-primary"></button>
21        </div>
22      </div>
23    </div>
24  </div>

javascript
1const quiz = [
2  {
3    question :'サッカー選手でで神の子と言われている選手は誰？',
4    answers:[
5      'メッシ',
6      'ロナウド',
7      'ムバッペ',
8      'ネイマール'
9    ],
10    correct: 'メッシ'
11  },
12  {
13    question:'メッシの国籍は？',
14    answers:[
15      'ブラジル',
16      'アルゼンチン',
17      '日本',
18      'オランダ'
19    ],
20    correct:'アルゼンチン'
21  },
22  {
23    question:'メッシの所属クラブは？',
24    answers:[
25      'レアル・マドリード',
26      'リバプール',
27      'パリサンジェルマン',
28      'バルセロナ'
29    ],
30    correct:'バルセロナ'
31  }
32];
33
34
35
36let quizIndex = 0;
37
38
39
40const buttons = document.querySelectorAll(".btn");
41
42// クイズの問題、選択肢準備
43const setUpQuiz = () => {
44  document.getElementById("js-question").textContent = quiz[quizIndex].question;
45  for (let i = 0; i < quiz[i].answers.length; i++) {
46    const answers = quiz[i].answers;
47    
48    console.log(answers);
49    answers.forEach(answer => {
50      const ans = answer;
51      document.getElementsByTagName("button")[i].textContent = ans;
52
53    });
54  }
55  
56}
57setUpQuiz();
58

■補足
console.log(answers);とすると
(4) ["メッシ", "ロナウド", "ムバッペ", "ネイマール"]
(4) ["ブラジル", "アルゼンチン", "日本", "オランダ"]
(4) ["レアル・マドリード", "リバプール", "パリサンジェルマン", "バルセロナ"]
になります。

Lhankor_Mhy

2020/10/13 02:54

「うまく要素を取得できない」とは具体的には何が起きていますか？　エラーメッセージなどをご提示ください。

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

回答1件

ベストアンサー

こんにちは。

forループいらないです。

js
1//  for (let i = 0; i < quiz[i].answers.length; i++) {
2//    const answers = quiz[i].answers;
3
4//    console.log(answers);
5    quiz[quizIndex].answers.forEach((answer,i) => {
6      const ans = answer;
7      document.getElementsByTagName("button")[i].textContent = ans;
8
9    });
10//  }
11