データの要素数を取得してhtml上に選択ボタンを表示したい

前提・実現したいこと

javascriptで作られたクイズアプリを改造しています。
データセットの中に選択肢の数だけボタンを生成するとき、
html上でどういう風に書けばいいか分かりません。

該当のソースコード

html
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  
10  <link rel="manifest" href="site.webmanifest">
11  <link rel="apple-touch-icon" href="icon.png">
12  <!-- Place favicon.ico in the root directory -->
13  
14  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
15  
16  <meta name="theme-color" content="#fafafa">
17</head>
18
19<body>
20  
21  <div class="container">
22    
23    <div class="jumbotron mt-5">
24      <div class="d-flex justify-content-center">
25        <div id="js-question" class="alert alert-primary" role="alert">
26          A simple primary alert—check it out!
27        </div>
28      </div>
29
30
31
32      <script src="app.js">
33        document.write(newDiv);
34      </script>
35      
36      <div id="js-items" class="d-flex justify-content-center">
37        <div class="m-2">
38          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
39        </div>
40        <div class="m-2">
41          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
42        </div>
43        <div class="m-2">
44          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
45        </div>
46        <div class="m-2">
47          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
48        </div>
49      </div>
50    </div>
51  </div>
52  
53  <script src="app.js"></script>
54</body>
55
56</html>

javascript
1const quiz = [
2  {
3    question: 'ゲーム市場、最も売れたゲーム機は次の内どれ？',
4    answers: [
5      'スーパーファミコン',
6      'プレイステーション2',
7      'ニンテンドースイッチ',
8      'ニンテンドーDS'
9    ],
10    correct: 'ニンテンドーDS'
11  }, {
12    question: '糸井重里が企画に関わった、任天堂の看板ゲームと言えば？',
13    answers: [
14      'MOTHER2',
15      'スーパーマリオブラザーズ3',
16      'スーパードンキーコング',
17      '星のカービィ'
18    ],
19    correct: 'MOTHER2'
20  }, {
21    question: 'ファイナルファンタジーⅣの主人公の名前は？',
22    answers: [
23      'フリオニール',
24      'クラウド',
25      // 'ティーダ',
26      'セシル'
27    ],
28    correct: 'セシル'
29  }
30];
31
32
33const quizLength = quiz.length;
34let quizIndex = 0;
35let score = 0;
36
37// 定数の文字列をHTMLに反映させる
38const $button = document.getElementsByTagName('button');
39const buttonLength = $button.length;
40
41// クイズの問題文、選択肢を定義
42const setupQuiz = () => {
43  document.getElementById('js-question').textContent = quiz[quizIndex].question; 
44  let buttonIndex = 0;
45  while(buttonIndex < buttonLength){
46    $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex];
47    buttonIndex++;
48  }
49}
50
51setupQuiz();
52
53const clickHandler = (e) => {
54  if(quiz[quizIndex].correct === e.target.textContent){
55    window.alert('正解！');
56    score++;
57  } else {
58    window.alert('不正解！');
59  }
60
61  quizIndex++;
62
63  if(quizIndex < quizLength) {
64    // 問題数がまだあればこちらを実行
65    setupQuiz();
66  } else {
67    // 問題数がもうなければこちらを実行
68    window.alert('終了！あなたの正解数は' + score + '/' + quizLength + 'です！');
69  }
70
71};
72
73// ボタンをクリックしたら正誤判定
74
75let handlerIndex = 0;
76while (handlerIndex < buttonLength) {
77  $button[handlerIndex].addEventListener('click', (e) => {
78    clickHandler(e);
79  });
80  handlerIndex++;
81}
82

試したこと

とりあえずクイズの各質問の選択肢の数は

javascript
1 quiz[0].answers.length;
2 quiz[1].answers.length;
3 quiz[2].answers.length;
4 quiz[3].answers.length;

で取得することができましたが、それをhtml上にどういう風に書けばいいのかが分かりません。

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

回答2件

ベストアンサー

回答数に応じてループ内で要素の追加を行えばよいかと

jqueryならappend()

$('#js-items').append('<button type="button" ... >');

あるいはjqueryを使わずにinsertAdjacentHTML()でも可能です

var parentNode = document.getElementById('js-items');
parentNode.insertAdjacentHTML('beforeend', '<button type=" button" ... >');

投稿2021/05/12 07:52

YTani0317

総合スコア34

tegeken

2021/05/13 01:59 編集

ご回答ありがとうございます。 htmlファイルは何も変えなくてもよいのでしょうか？ var parentNode = document.getElementById('js-items'); parentNode.insertAdjacentHTML('beforeend', '<button type=" button" ... >'); はapp.jsのどの部分に書けばよいでしょうか？

tegeken

2021/05/16 10:13

htmlのjs-items内の子要素を削除しアドバイスどおりにできました。ありがとうございました。 const parentNode = document.getElementById('js-items'); const setupQuiz = () => { document.getElementById('js-question').textContent = quiz[quizIndex].question; let buttonIndex = 0; while(buttonIndex < quiz[quizIndex].answers.length){ parentNode.insertAdjacentHTML('beforeEnd', '<div class="m-2"><button type="button" class="btn btn-primary">Primary</button></div>'); $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex]; buttonIndex++; } }

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

選択肢の数にあわせて、ボタンの表示・非表示も切り替えるとか。

JS
1  while(buttonIndex < buttonLength){
2    if (buttonIndex >= quiz[quizIndex].answers.length) {
3      $button[buttonIndex].style.visibility = "hidden";
4    } else {
5      $button[buttonIndex].style.visibility = "visible";
6      $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex];
7    }
8    buttonIndex++;
9  }

投稿2021/05/12 07:53

FromMZ1500

総合スコア496

tegeken

2021/05/13 02:05

ご回答ありがとうございます。 app.jsの一番下に上記のコードをコピペしましたが動作は変化しませんでした。それ以外にhtmlファイルも変更する箇所がありますでしょうか。

FromMZ1500

2021/05/13 02:08

app.jsの一番下？ではなく、 // クイズの問題文、選択肢を定義 const setupQuiz = () => { document.getElementById('js-question').textContent = quiz[quizIndex].question; let buttonIndex = 0; while(buttonIndex < buttonLength){ $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex]; buttonIndex++; } } の while ループですよ。

tegeken

2021/05/14 02:35

ありがとうございます。ご指摘の箇所を修正して配列のanswersの数が少ないときは、buttonを消すことができました。しかしanswersの数が多いときは予めhtmlのbuttonを増やして置かなければなりません。自動でbotton要素を増やすことは可能でしょうか？

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

あなたの回答