Javascript - I tried to have 2 buttons, one changing the bgcolor of body to white, the other to black (i want a light mode and dark mdeo for my website)

Javascript – I tried to have 2 buttons, one changing the bgcolor of body to white, the other to black (i want a light mode and dark mdeo for my website)

Last updated: 2024/01/12 at 2:37 PM

Admin

1 Min Read

Problem:

Right now it does not change the color of the background

Contents

Problem:Solution:

This is my html code:

<button onclick="light_mode()">Light mode</button>
<button onclick="dark_mode()">Dark mode</button>

this is my javascript:

function dark_mode() {
        document.getElementById('body').x.style.background = "color:black";
    }
    function light_mode() {
        document.getElementById('body').x.style.background = "color:white";
    }

I gave the body an id “body” so the js would work. Right now it does not work though. Im a beginner at javascript so pls simple explanation. Thank you!

Solution:

The way you’re doing the changing of the colours is a bit off. Here’s a corrected version of your JavaScript:

function dark_mode() {
    document.getElementById('body').style.backgroundColor = "black";
}

function light_mode() {
    document.getElementById('body').style.backgroundColor = "white";
}

And, your HTML should look something like this:

<body id="body">
    <!-- Your content goes here -->

    <button onclick="light_mode()">Light mode</button>
    <button onclick="dark_mode()">Dark mode</button>

    <!-- More content if you have -->
</body>