JavaScript Change Background Color – With Application

TL;DR: Here is a code snippet you can use to change the background color of an element. (There is a full application in the post where we change colors)

document.getElementById("SomeId").style.backgroundColor = "#eee";

In this post we are going to build an application where you provide the RGB value in some input boxes, and we will use that info to change the background color of a div. This should be a cool project that you can use to learn how to use JS to change the background color.

There are a few things that we will need for our background color changer project.

  1. Input boxes for RGB values
  2. An update button
  3. A box that changes color

You can check out our guide on how to get input values if you want more details on how to do it than what we provide in this post.

Building a Background Color Changer Application

There are a few things that we need for our application to be able to change the background color.

Application HTML Structure

The first thing that we will do is to create three input boxes that will server as our RGB (Red, Green, Blue) inputs.

Input boxes for RGB values

<input class="rgb" id="red" placeholder="red" />
<input class="rgb" id="green" placeholder="green" />
<input class="rgb" id="blue" placeholder="blue" />

Here is the output for the boxes.


Update button

The next thing we need for our application is an update button. This will just be a regular button with an ID on it so that we can listen for when someone clicks the button.

<button id="updateButton">Update</button>

This is what the button will look like.

Box that will change color

Our box will just be a div where we set the width and height. The div also needs an ID so that we can get the element to update the background color using JS.

<div id="colorBox"></div>

Lets add some style to the box. Because I am going embed the example on this page, the CSS is wrapped in style elements.

<style>
    #colorBox(
        height:200px;
        width:200px;
        background-color: eee;
    }
</style>

This is what the box will look like.

JS Change Background Color Code

We are now ready for the more interesting JS part. We now have to create the code that will use Javacript to change the background color of a div.

The strategy will be as follows:

  1. User clicks on button
  2. We read in the values from the input boxes
  3. We set the background color of our div using JS

When we set the color we are going to set the RGB color using JavaScript. RGB is set by giving the R, G, and B values to rgb(R,G,B).

var button = document.getElementById("updateButton"); 

button.addEventListener("click", function(){
    var red = getInput("red");
    var green = getInput("green");
    var blue = getInput("blue");

    var box = getElement("colorBox");
    var rgb = getRGBString(red, green, blue);
    box.style.backgroundColor = rgb;
}

function getRGBString(r, g, b{
    return "rgb(" + r + "," + g + "," + b + ")";
}

function getInput(id){
    return document.getElementById(id).value;
}

function getElement(id){
    return document.getElementById(id);
}

Working Color Changer Application

I have embedded all the code we have gone over above into the page and here you can see a working version of the JS background color application.

The application above uses JS to change the background color of the div based on the values that you give in the boxes.

If you want to do some practice, you could update the app so that it updates the color every time you make a change to one of the boxes. That is, make it so that you don’t have to click the update button.

Last Updated: by Ole