0

そのため、javascript トグル ボタンを使用してコンテナー div の色を変更する方法を見つけようとしていますが、ステートメントで div を機能させようとすると、明らかな何かが欠けていると思います。コードを実行してトグル ボタンを押しても何も起こりません。ありがとうございました！

<!DOCTYPE html>
    <head>
    <style>

    body {

    }

    #container {
        height: 300px;
        width: 500px;
        background: lightblue;
        position: absolute;
        float: center;
        text-align: center;
    }

    h1 {
        font-size: 50px;
        font-family: sans-serif;
    }

    #button {
        font-size: 30px;

    }
    </style>

    <script>

    function toggleColour()

    {
        if (document.getElementById('container').style.background == ("lightblue"))
            {
                document.getElementById('container').style.background = ("orange");
            }
        else
            {
                document.getElementById('container').style.background = ("lightblue");
            }
    }

    </script>

    <body>
    <div id="container">

    <h1>Lets button this up!</h1>
    <button type="button" id="button" onclick="toggleColour()">Toggle Colour</button>

    </div>
    </body>
4

3 に答える 3