Q&A
乱雑な投稿、大変失礼します。
ボタンに選択肢を表示させたいですが、なぜ表示できないのかご教授いただけましたら幸いです。
const quiz =[
{
question: 'ゲーム市場、最も売れたゲーム機は次のうちどれ？',
answers:['スーパーファミコン','プレイステーション２','ニンテンドースイッチ','ニンテンドーDS'],
correct:'ニンテンドーDS'
},{
question: '糸井重里が企画に関わった、任天堂の看板ゲームといえば？',
answers: ['MOTHER2','スーパーマリオブラザーズ３','スーパードンキーコング','星のカービィ',],
correct:'MOTHER2'
},{
question: 'ファイナルファンタジーⅣの主人公の名前は？',
answers: ['フリオニール','クラウド','ティーダ','セシル',],
correct:'セシル'
}
];
const $window = window;
const $doc = document;
const $question = $doc.getElementById('js-question');
const quizLength = quiz.length;
let quizIndex = 0;
let score = 0;
const $button = document.getElementsByTagName('button');
const buttonLength = $button.length;
//クイズの問題文、選択肢を定義
const setupQuiz = () => {
$question.textContent= quiz[quizIndex].question;
const buttonLength = $button.Length;
let buttonIndex = 0;
while(buttonIndex < buttonLength){
$button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex];
buttonIndex++;
}
};
setupQuiz();
const clickHandler = (elm) => {
if(elm.textContent === quiz[quizIndex].correct){
window.alert('正解！');
score++;
}else{
window.alert('不正解！');
}
quizIndex++;
if(quizIndex< quizLength){
//問題数がまだあればこちらを実行
setupQuiz();
}else{
//問題数がもうなければこちらを実行
window.alert('終了!あなたの正解数は' + score + '/' + quizLength + 'です！');
}
};
//ボタンをクリックしたら正誤判定
let handlerIndex = 0;
while (handlerIndex < buttonLength) {
$button[handlerIndex].addEventListener('click', (e) => {
clickHandler(e);
});
handlerIndex++;
}
以下、HTMLです
<!doctype html> <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 rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png"> <!-- Place favicon.ico in the root directory --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <meta name="theme-color" content="#fafafa"> </head> <body> <div class="container"> <div id="js-question" class="mt-3 alert alert-primary" role="alert"> A simple primary alert-check it out! </div> <!-- <div class="d-flex justify-content-center"> --> <div id="js-items" class="d-flex justify-content-center"> <div class="m-2"> <button type="button" id="js-btn-1" class="button btn-primary">Primary</button> </div> <div class="m-2"> <button type="button" id="js-btn-2" class="ml-1 button btn-primary">Primary</button> </div> <div class="m-2"> <button type="button" id="js-btn-3" class="ml-1 button btn-primary">Primary</button> </div> <div class="m-2"> <button type="button" id="js-btn-4" class="ml-1 button btn-primary">Primary</button> </div> </div> </body> <script src="app.js"></script> </html> **ボールドテキスト**
ソースはmarkdownしてください
JavaScriptとHTMLのコードを ``` で囲ってください。https://teratail.com/questions/238564
ブラウザの開発者ツールのコンソールになにかエラーが出ていますか。
皆様、ありがとうございます。markdown、codeを押すなど確認し、一度投稿したものは編集できないようなので、再投稿させていただきます。
編集できるようですので、修正させていただきます。
回答1件
0
ベストアンサー
javascript
1const buttonLength = $button.Length;
を
javascript
1const buttonLength = $button.length;
投稿2022/03/23 10:48
総合スコア137
あなたの回答
tips
プレビュー
