【JavaScript】クイズ問題（簡単なの）

リファクタリングが難しいため、とりあえずここまで記載します。

実際に作ったサイトはこちら（どんどん改良しているはず・・・）

メープルのお役立ち情報サイト

クイズ

この問題のベースはBootstrapで組んでいます。

HTML
JavaScript

HTML

<div id="js-question" class="alert alert-danger mx-auto text-center w-50 fs-5" role="alert">
    question
</div>
            
<div class="text-center">
  　<button type="button" class="btn btn-danger me-3 bd-highlight d-inline-block">・・・</button>
    <button type="button" class="btn btn-danger me-3 bd-highlight d-inline-block">・・・</button>
    <button type="button" class="btn btn-danger me-3 bd-highlight d-inline-block">・・・</button>
    <button type="button" class="btn btn-danger">・・・</button>
</div>

JavaScript

const question = "風邪を治す薬はどれ？"

const answers = [
    "のど飴",
    "うがい薬",
    "オロナイン",
    "ない"
];

//正解の選択肢
const correct = "ない";


// id(js-question)にあるテキストを、定義したcontentの文に書き換える
document.getElementById("js-question").textContent = question;

// 何度も出てくる「document.getElementsByTagName("button")」をまとめる
const $button = document.getElementsByTagName("button");

//buttonのテキストを指定
$button[0].textContent = answers[0];
$button[1].textContent = answers[1];
$button[2].textContent = answers[2];
$button[3].textContent = answers[3];



// クリックして正誤判定する
$button[0].addEventListener("click", () => {
    if(correct === $button[0].textContent){
        window.alert("おみごと！");
    } else{
        window.alert("残念・・・");
    }

});

$button[1].addEventListener("click", () => {
    if(correct === $button[1].textContent){
        window.alert("おみごと！");
    } else{
        window.alert("残念・・・");
    }

});

$button[2].addEventListener("click", () => {
    if(correct === $button[2].textContent){
        window.alert("おみごと！");
    } else{
        window.alert("残念・・・");
    }

});

$button[3].addEventListener("click", () => {
    if(correct === $button[3].textContent){
        window.alert("おみごと！");
    } else{
        window.alert("残念・・・");
    }

});

HTML

JavaScript

コメント