October 3, 2021

How to Change Background Color in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to change background color in javascript. The background color of your website describes the overall theme of your website. Depending upon background color, you choose different color palettes for buttons, inputs, and other elements.

You must have seen websites where they give you the option to choose between light and dark themes. As soon as you pick a theme, the background color of the website, as well as background color of other elements gets changed.

We are not going to create some sort of theme here, but we are going to change the background color of a website dynamically.

We are going to change the background color in 2 scenarios. The first scenario involves changing the background color upon the click of a button. We will have multiple buttons and each button will represent a different color. Depending upon which button is clicked, we will change the background color.

The second scenario involves changing background color upon the selection of specific color from the dropdown list. We will pick on random color from the dropdown list and according to that, we will change the background color.

In the following example, we are going to cover both the approaches mentioned above. We have 3 buttons and a dropdown list. We will change the background color depending upon which button is clicked or which option is selected from the dropdown list. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, button, select, and option). The div element with a class of container is just a wrapper for the rest of the elements.

We have 3 button elements with an innerText of “Red”, “Green”, and “Blue” respectively.
We have a dropdown list with 4 color options. The default color indicates white color.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>

    <div class="container">
        <div>
            <button id="btn-red">Red</button>
            <button id="btn-green">Green</button>
            <button id="btn-blue">Blue</button>
        </div>

        <div>
            <select>
                <option value="default">Default</option>
                <option value="red">Red</option>
                <option value="green">Green</option>
                <option value="blue">Blue</option>
            </select>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

.container {
  display: flex;
  justify-content: space-between;
}

button {
  height: 50px;
  width: 50px;
}

Javascript

We have selected all the button elements and the select element using the document.querySelector() method and stored them in the btnRed, btnGreen, btnBlue, and dropdown variables respectively.

We have attached a click event listener to all the button elements.
In the click event handler function of each button element, we are using background property, and depending upon which button is clicked, we are changing background color according to that.
We have attached the change event listener to the select element.

We are getting the value of the currently selected option and storing it in the color variable.
We are using the switch statement and changing the background color according to the value of the color variable. We have commented out this part.
We are using the if statement here. If the value of the color variable is default, then we will set the background color to white. Otherwise, we will set the background color based on the value of the color variable.

let btnRed = document.querySelector('#btn-red');
let btnGreen = document.querySelector('#btn-green');
let btnBlue = document.querySelector('#btn-blue');
let dropdown = document.querySelector('select');


btnRed.addEventListener('click', () => {
    document.body.style.background = 'red';
})

btnGreen.addEventListener('click', () => {
    document.body.style.background = 'green';
})

btnBlue.addEventListener('click', () => {
    document.body.style.background = 'blue';
})

dropdown.addEventListener('change', function () {
    const color = this.value;

    /* switch (color) {
        case 'red':
            document.body.style.background = 'red';
            break;
        case 'green':
            document.body.style.background = 'green';
            break;
        case 'blue':
            document.body.style.background = 'blue';
            break;
        default:
            document.body.style.background = 'white';
    } */

    if(color === 'default'){
        document.body.style.background = 'white';
    }else {
        document.body.style.background = color;
    }
})

You May Also Like: