【ハンズオンJavaScript】最速でJavaScriptを扱えるようになる４日目　クイズゲーム④

2021年 06月 02日

タグ：

JavaScript

クイズゲーム

ハンズオンJavaScriptを進めていく上での補助記事その４です。

やること：createElement,querySelector(),appendChild(), Object,
やらないこと：アロー関数など

クイズゲームの作成その4

createElementとappendChild()で要素を追加する。

document.createElement("作成するタグ") で指定したhtml要素を作成することができます。 document.querySelector("CSSセレクター") で指定したCSSセレクタのうち一番最初に見つけたものを取得します。これはdocument.getElementById()と同じような形で使えます。 appendChild("html要素") は指定したhtml要素を子要素に１つだけ追加することができます。

これらを使って新しい選択肢であるEをJavaScript側から作ることができます。

<script>
    const li = document.createElement("li");
    li.textContent = "E"
    li.setAttribute("id", "E")
    document.querySelector("ul").appendChild(li)

    buttons = ["A", "B", "C", "D"];

    // 以下略
</script>

クイズ4日目_1

Google Developer ToolsのElementsタブで確認すると、id属性がEの要素が追加できています。クイズ4日目_2

既存の要素をJavaScriptで置き換える

新しく選択肢Eを作れたということは、既存のA~DまでもJavaScriptで作ることができます。前回使った配列とforループを使うだけです。

<body>
    <div class="mondai">
        <p>問題文</p>
    </div>
    <ul>
        <!-- A~Dを削除 -->
    </ul>
</body>
<script>

    buttons = ["A", "B", "C", "D","E"];

    for (btn of buttons) {
        const li = document.createElement("li");
        li.textContent = btn
        li.setAttribute("id", btn)
        document.querySelector("ul").appendChild(li)
    }

    // 以下略

</script>

オブジェクト型で選択肢の中身を管理する P81 2.13 オブジェクト

配列によって複数の要素を順番で管理してきましたが、オブジェクトは要素をまとめるもう一つの手段です。
オブジェクトは名前(key)と値(value)のペアで管理します。名前と値の間を：を用いて結びつけて表記します。

問題文を日本で２番目に高い山は？として、選択肢のデータを管理するオブジェクトを作るとこんな感じになります。

<script>
    answerObject = {
        "A" : "北岳",
        "B" : "槍ヶ岳",
        "C" : "奥穂高岳",
        "D" : "剱岳",
        "E" : "立山"
    }
</script>

このオブジェクトのデータを利用する方法にはいくつかありますが、最も簡単な方法は[]で指定することです。
たとえば、answerObject["A"]と指定すると"北岳"が取得できます。

オブジェクトから配列を生成する P151 4.6.2.3 プロパティ一覧

また、オブジェクトから配列を生成することができます。名前(key)だけが入った配列を作るにはObject.keys(answerObject) 値(value)だけが入った配列を作るにはObject.values(answerObject)を

これらを利用して、回答の選択肢をA,B,C,D,Eから変更します。

<body>
    <div class="mondai">
        <p>日本で２番目に高い山は？</p>
    </div>
    <ul>
        <!-- A~Dを削除 -->
    </ul>
</body>
<script>
    answerObject = {
        "A": "北岳",
        "B": "槍ヶ岳",
        "C": "奥穂高岳",
        "D": "剱岳",
        "E": "立山"
    }

    // A~Eの配列はオブジェクトから作る
    buttons = Object.keys(answerObject);

    for (btn of buttons) {
        const li = document.createElement("li");
        // textContent はオブジェクトから取得する
        li.textContent = answerObject[btn]
        li.setAttribute("id", btn)
        document.querySelector("ul").appendChild(li)
    }

    function removeAnswer(answer) {
        const answerElement = document.getElementById(answer);
        answerElement.removeAttribute("class");
         // textContent はオブジェクトから取得する
        answerElement.textContent = answerObject[answer];
    }

    function clickButton(clickButton) {
        document.getElementById(clickButton).addEventListener("click", function () {
            if (clickButton === "A") {
                this.setAttribute("class", "true");
                this.textContent = "正解";
            } else {
                this.setAttribute("class", "false");
                this.textContent = "不正解";
            }
            for (const button of buttons) {
                if (button !== clickButton) {
                    removeAnswer(button)

                }
            }
        })
    }

    for (const btn of buttons) {
        clickButton(btn)
    }
</script>

クイズ4日目_3