How do I change the background-color CSS with Javascript?

Question

I was wanting to change the background-color in my CSS code by using a button with JavaScript. I have tried things such as

document.getElementByID("").style.background = colour. This didn't work, presumably because I was selecting the HTML element rather than the ID, where the CSS information is stored. I also tried jQuery. I tried $("#traffic_light").css("background-color", "green").

This also didn't work, but it may have been because I didn't use the correct selector at the start. If anyone does know the selector to select the CSS style for an ID then please tell me. Anyway here's my code:

<!DOCTYPE html>
<html>
    <head>
        <title>Traffic Lights</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>

        <style type="text/css">
            #traffic_light { 
                width:200px;
                height:200px;
                padding:10px 11px;
                margin:0 auto;
                border:2px solid #a1a1a1;
                border-radius:150px;
                background-color:green;
            }
        </style>

        <div id="traffic_light"></div>
        <button type="button" onclick="colour_change()">Change Lights</button>

        <script>
            var colour = ["green", "orange", "red"];
            var i = 0;
            document.getElementByID("traffic_light").style.background = colour[i];

            function colour_change() {
                i++;
                document.getElementByID("traffic_light").style.background = colour[i];
            };
        </script>
    </body>
</html>

instead of `.background`, you should use `.backgroundColor`. — abhishekkannojia, Mar 23 '17 at 06:54
It's just a typo. It's `getElementById` (lower case `d`), not `getElementByID`; capitalization matters. First rule of web development: Always look in the console for errors. *"This didn't work, presumably because I was selecting the HTML element rather than the ID"* No, you're selecting the element, not its ID. — T.J. Crowder, Mar 23 '17 at 06:54
There is is a typo. _getElementById_ is not same as _getElementByID_ [Demo](https://jsfiddle.net/n3zjyqjL/) — brk, Mar 23 '17 at 06:56
Possible duplicate of [How do I change the background color with JavaScript?](http://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript) — iWillGetBetter, Mar 23 '17 at 07:20

score 1 · Accepted Answer · answered Mar 23 '17 at 06:57

1

document.getElementById("traffic_light").style.backgroundColor = colour[i];

answered Mar 23 '17 at 06:57

Angnima Sherpa

224
1
2
11

score 0 · Answer 2 · answered Mar 23 '17 at 07:00

0

Check this link hope it will work for you: http://www.java2s.com/Tutorial/JavaScript/0440__Style/divstylebackgroundColor00f.htm

answered Mar 23 '17 at 07:00

Jobayer Ahmed

16
4

G.Ashok Kumar · Answer 3 · 2017-03-23T07:16:46.103

0

<script>
function colour_change() {

document.getElementById("traffic_light").style.backgroundColor = colour[i]; 
}
</script>

<button type="button" onclick="colour_change()">Change Lights</button>

Great it was typo answered by demo brk and angnima

edited Mar 23 '17 at 07:16

answered Mar 23 '17 at 07:00

G.Ashok Kumar

1,649
2
13
25

score 0 · Answer 4 · answered Mar 23 '17 at 07:05

In jquery

    <!DOCTYPE html>
<html>
    <head>
        <title>Traffic Lights</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>

    <body>


        <style type="text/css">
            #traffic_light { 
                width:200px;
                height:200px;
                padding:10px 11px;
                margin:0 auto;
                border:2px solid #a1a1a1;
                border-radius:150px;
                background-color:green;
            }
        </style>

        <div id="traffic_light"></div>

        <button type="button" id="change">Change Lights</button>

        <script>

            var colour = ["green", "orange", "red"];
            var i = 0;
            $('#change').click(function() {
                 if(i==colour.length-1)
                   i=0;
                 else
                   i++;
                $('#traffic_light').css('background-color', colour[i]);

            });

        </script>
    </body>
</html>

score 0 · Answer 5 · answered Mar 23 '17 at 07:14

0

Oops. I always thought it was .getElementByID. Apparently not. Thanks everyone :)

answered Mar 23 '17 at 07:14

Robert Clarke

475
4
14

score 0 · Answer 6 · answered Mar 23 '17 at 07:15

This will work

<!DOCTYPE html>
<html>
    <head>
        <title>Traffic Lights</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>

    <body>


        <style type="text/css">
            #traffic_light { 
                width:200px;
                height:200px;
                padding:10px 11px;
                margin:0 auto;
                border:2px solid #a1a1a1;
                border-radius:150px;
                background-color:green;
            }
        </style>

        <div id="traffic_light"></div>

        <button type="button" onclick="colour_change()">Change Lights</button>

        <script>

            var i = 0;

    var colour_change = function(){

    var colour = ["green", "orange", "red"];
        if(i==colour.length)
            {
                i=0;
            }
       document.getElementById("traffic_light").style.backgroundColor = colour[i];
        i= i+1;

}
        </script>
    </body>
</html>

score 0 · Answer 7 · edited Mar 23 '17 at 09:25

There is a typo in your code. Instead of document.getElementByID(), use document.getElementById().

Other than that, you can change the background color with each click by using this condition-

    var colour = ["green", "orange", "red"];
    var i = 0;
    document.getElementById("traffic_light").style.background = colour[i];

    function colour_change() {
        i++;
        i = i<colour.length ? i :  0;
        document.getElementById("traffic_light").style.background = colour[i];
    };

And in the HTML-

    <div id="traffic_light"></div>
    <button type="button" onclick="colour_change()">Change Lights</button>

How do I change the background-color CSS with Javascript?

7 Answers7