2章チェックテスト

javaScript中級テスト

この研修では、JavaScriptフォルダの中の2-5というフォルダの中に課題を作成してください。

問1:実際の開発現場で 「プルダウンの選択項目によって、表示される項目を切り替える処理を追加する」 というタスクが振られたという場合を想定して解いてみてください。

【要件】：プルダウンで「日本語」なら日本語の文字だけ、「English」なら英語だけ、「全て表示」が選択されたら日本語と英語が表示される。 ※元の問題文（ソースコード）を消さない限り、idやクラス、関数を新たに作成して実装しても構いません。

このテストでは、実装方法は様々なパターンがあると思うので、エラーが無くて要件を満たす動きができていればOKです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            font-size: 1.5em;
            text-align: center;
        }

        th, td {
            padding : 10px;
        }

    </style>
</head>
<body>
    <select onchange="changeLang()">
        <option id="select">選択してください</option>
        <option id="selected_jpn">日本語</option>
        <option id="selected_en">English</option>
        <option id="selected_all">全て表示</option>
    </select>
    <table>
        <tr>
            <th>日本</th>
            <td>こんにちは</td>
            <td>ありがとう</td>
            <td>さようなら</td>
        </tr>
        <tr>
            <th>English</th>
            <td>Hello</td>
            <td>Thank you</td>
            <td>Good Bye</td>
        </tr>
    </table>

    <script>
        //①onchangeで使用されている関数の中身を実装してください。
    </script>
</body>
</html>

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami