Question 266524 in Html Question posted in
Some basic documentation can be found here.

Html – 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)

Right now it does not change the color of the background

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!

Tags:

2

Answers


  1. 0

    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>

    Be sure to let me know if you have any other questions 🙂

    Login or Signup to reply.
  2. 0

    you need to change the background color of the inputs, but if everything is black you wont see the input

    input{
background-color:black;
}

body{
background-color:grey;
}
    <body>

<input>

</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search