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

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

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

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

解決済

[JS]ボタンに選択肢を表示させたい

bloopie
bloopie

総合スコア1

JavaScript

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

1回答

0評価

1クリップ

205閲覧

投稿2022/03/23 01:51

ボタンに選択肢を表示させたいですが、なぜ表示できないのかご教授いただけましたら幸いです。

const quiz =[
{
question: 'ゲーム市場、最も売れたゲーム機は次のうちどれ?',
answers:['スーパーファミコン','プレイステーション2','ニンテンドースイッチ','ニンテンドーDS'],
correct:'ニンテンドーDS'
},{
question: '糸井重里が企画に関わった、任天堂の看板ゲームといえば?',
answers: ['MOTHER2','スーパーマリオブラザーズ3','スーパードンキーコング','星のカービィ',],
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> **ボールドテキスト**

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

bloopie

2022/03/23 01:52

乱雑な投稿、大変失礼します。
yambejp

2022/03/23 01:57

ソースはmarkdownしてください
int32_t

2022/03/23 01:58

JavaScriptとHTMLのコードを ``` で囲ってください。https://teratail.com/questions/238564 ブラウザの開発者ツールのコンソールになにかエラーが出ていますか。
bloopie

2022/03/23 02:57

皆様、ありがとうございます。markdown、codeを押すなど確認し、一度投稿したものは編集できないようなので、再投稿させていただきます。
bloopie

2022/03/23 02:58

編集できるようですので、修正させていただきます。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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