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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Q&A

解決済

1回答

2120閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0グッド

0クリップ

投稿2020/10/06 01:57

お世話になっております。
現在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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

投稿2020/10/06 02:17

tomomo

総合スコア430

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/10/06 02:25

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

2020/10/06 02:40

”取得したクイズデータを表示”というところかな、問題を取ったとき回答ボタンの其れも...ってのが楽な気はするような。誤まってたり、もっといいやり方があるかもしれませんが。 (大分感覚でなんとなくモノ言っるところがあってスミマセン。。。)
退会済みユーザー

退会済みユーザー

2020/10/06 03:04

いえ。解答感謝します。 ぜひ参考にさせていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問