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
– abhishekkannojia, Commented Mar 23, 2017 at 6: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
– T.J. Crowder, Commented Mar 23, 2017 at 6:54
There is is a typo. getElementById is not same as getElementByID Demo — brk
– brk, Commented Mar 23, 2017 at 6:56
Possible duplicate of How do I change the background color with JavaScript? — iWillGetBetter
– iWillGetBetter, Commented Mar 23, 2017 at 7:20

Angnima Sherpa · Accepted Answer · 2017-03-23 06:57:44Z

1

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

answered Mar 23, 2017 at 6:57

Angnima Sherpa

2341 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jobayer Ahmed · Accepted Answer · 2017-03-23 07:00:08Z

0

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

answered Mar 23, 2017 at 7:00

Jobayer Ahmed

164 bronze badges

Comments

Prashant Sharma · Accepted Answer · 2017-03-23 07:05:07Z

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>

Robert Clarke · Accepted Answer · 2017-03-23 07:14:11Z

0

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

answered Mar 23, 2017 at 7:14

Robert Clarke

4851 gold badge5 silver badges14 bronze badges

Comments

Sai Pavan · Accepted Answer · 2017-03-23 07:15:48Z

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>

G.Ashok Kumar · Accepted Answer · 2017-03-23 07:16:46Z

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, 2017 at 7:16

answered Mar 23, 2017 at 7:00

G.Ashok Kumar

1,6332 gold badges15 silver badges25 bronze badges

Comments

RavatSinh Sisodiya · Accepted Answer · 2017-03-23 09:25:17Z

0

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>

edited Mar 23, 2017 at 9:25

RavatSinh Sisodiya

1,6161 gold badge21 silver badges42 bronze badges

answered Mar 23, 2017 at 7:50

pjoshi

11 bronze badge

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related