解答

解答


課題の解答です。
必ずしもこの回答だけが正解というわけではなく、書き方はいろいろなパターンがあります。
基本的にはエラーが無く、要件を満たす動きがされていたらOKです。実装方法に不明点がありましたら、質問してみてください。

要素の取得 document.getElement…


問1:JavaScriptから要素を操作して、四角の色が赤色に変わるようにしてください。

<!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>
        #box {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById('box');
        box.style.backgroundColor = 'red';
    </script>
</body>
</html>

要素の取得 document.querySelector…


問1:テキストの表示非表示を切り替えるボタンを作成してください。(getElementByIdとquerySelectorのどちらを使用しても大丈夫です)

<!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>

    </style>
</head>
<body>
    <input type="button" value="ボタン" onClick="changeBtn()">
<p id="p1">ボタンが押されると表示非表示が切り替わります。</p>

    <script>
        function changeBtn() {
            //id「p1」の要素を取得
            let p1 = document.getElementById('p1');
            //または、 let p1 = document.querySelector('#p1');

            // ②取得したp1に「display:none」が無かったら、「display:none」を付与する。
            if (p1.style.display != 'none') {
                p1.style.display = 'none';
            // 取得したp1に「display:none」があったら、「display:block」を付与する。
            } else if (p1.style.display == 'none') {
                p1.style.display = 'block';
            }
        }
    </script>
</body>
</html>

イベント


問1:ボタンを押したら、「大吉」「中吉」「凶」と文字が変わるようなおみくじを作成してください。

<!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>
        #btn {
            height: 100px;
            width: 100px;
            background-color: red;
            border-radius: 50%;
            color: white;
            text-align: center;
            line-height: 100px;
            cursor: pointer;;
            font-weight: bold;
            user-select: none;
        }
        #btn:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div id="btn">クリック</div>
    <script>
    //btnを取得
    const btn = document.getElementById('btn');

    // ボタンがクリックされたら、という処理の始まり
    btn.addEventListener('click', function() {
        //①配列で「大吉」「中吉」「凶」を準備
        const results = ['大吉', '中吉', '凶'];
        //②乱数を発生させて、その値を取得
        const n = Math.floor(Math.random() * results.length);
        //③取得した **btn** の「クリック」という文字を配列の中身の文字にランダムに変化させる
        btn.textContent = results[n];
    }, false);
    </script>
</body>
</html>

要素の追加


問1:以下の要件を満たすように「追加ボタン」と「削除ボタン」実装してください。

・「追加ボタン」:指定した文字をテキストエリアに追加することができる。
・「削除ボタン」:テキストエリア内を空にする削除する。
・「削除ボタン」が押された時は、入力エリア内のテキストも削除するようにする。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="text1" placeholder="入力してください">
    <input type="button" value="追加" onclick="addText();">
    <input type="button" value="削除" onclick="deleteText();">
    <br>
    <textarea id="area1" cols="50" rows="8" placeholder="ここに出力されます"></textarea>
    <script>

        
    function addText() {
        //①入力欄のテキストを取得
        let text1 = document.getElementById('text1').value;
        //②出力欄のテキストエリアを取得
        let area1 = document.getElementById('area1');
        //③出力欄に入力された文字列を足していく
        area1.value += text1 + "\n";
    }

    function deleteText() {
        //④出力欄のテキストを空にする
        area1.value = '';
        //⑤入力欄のテキストを空にする
        text1.value = '';
    }
    </script>
</body>
</html>

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami