CODEWITHSUNDEEP
javascriptjqueryhtmlcssstyles
Robert Clarke
Robert Clarke

Reputation: 485

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

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>

Upvotes: 0

Views: 2695

Answers (7)

pjoshi
pjoshi

Reputation: 1

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>

Upvotes: 0

G.Ashok Kumar
G.Ashok Kumar

Reputation: 1633

<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

Upvotes: 0

Sai Pavan
Sai Pavan

Reputation: 183

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>

Upvotes: 0

Robert Clarke
Robert Clarke

Reputation: 485

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

Upvotes: 0

Prashant Sharma
Prashant Sharma

Reputation: 3

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>

Upvotes: 0

Jobayer Ahmed
Jobayer Ahmed

Reputation: 16

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

Upvotes: 0

Angnima Sherpa
Angnima Sherpa

Reputation: 234

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

Upvotes: 1

Related Questions