Using jQuery to change background color on click

Question

I am new to jQuery and I have read through threads on this topic, but I am having some trouble understanding the logic and after re-writing my code, I'm still unable to get it to work.

I have two buttons and I would like for each one to change the background color and text color on click. Here is a link to my jsfiddle

Any feedback or advice would be very appreciated. Thanks!

jQuery(document).ready(function() {
    $("#footer").on("click", "#purple', function() {
       $(this).css("background-color", "#9683ec");
       $(this).css("color", "#2d2746");
    });

    $("footer").on("click", "#blue', function() {
       $(this).css("background-color", "#00bfff");
       $(this).css("color", "#002633");
    });
});

Thanks for the feedback. I'm not sure if I understand what you mean. Can you tell me more? — Allison H.
– Allison H., Commented Feb 21, 2016 at 16:06
add this to your project <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> — caldera.sac
– caldera.sac, Commented Feb 21, 2016 at 16:15
All your code is right. You just have to to correct your quotes in your code. At #purple and #blue you open double quotes and close single quotes. Make sure you have to use either single quotes or double quotes. But not one single quote and one double quote. — Harish Kommuri
– Harish Kommuri, Commented Feb 21, 2016 at 16:31

Yass · Accepted Answer · 2016-02-21 16:22:27Z

1

Fiddle Demo

The click event is looking for a descendant with an id of #purple or #blue and there isn't one in both cases.

From the jQuery documentation for the on function:

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Wrapping the text within the buttons with a span and setting the id value on the spans instead will work.

Also, it looks like you're not targeting the body on the click event, so the background-color will not change as intended.

HTML

<footer>
  <button><span id="purple">Purple</span></button>
  <button><span id="blue">Blue</span></button>
  <p>&copy;Allison Harris 2016</p>
</footer>

jQuery:

jQuery(document).ready(function() {
  $("button").on("click", "#purple", function() {
    $('body').css("background-color", "#9683ec");
  });

  $("button").on("click", "#blue", function() {
    $('body').css("background-color", "#00bfff");
  });
});

answered Feb 21, 2016 at 16:22

Yass

2,6683 gold badges15 silver badges21 bronze badges

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

2 Comments

Allison H. Over a year ago

Thank you so much! I was able to get my code to work. Here is an updated link: jsfiddle.net/allisoncodes/zdpbx518/18

Yass Over a year ago

@AllisonH. You're welcome. The code in your fiddle changes the color of the button and not the background.

Zakaria Acharki · Accepted Answer · 2016-02-21 16:08:01Z

1

You have a typo in "#purple' and "#blue' using single qoute and double quotes in the same string, you should choose one of them :

$("#footer").on("click", "#purple", function() {
//OR
$("#footer").on("click", '#purple', function() {

Also you could attach multiple css in same time using :

$(this).css({ "background-color": "#9683ec", "color": "#2d2746" })

Instead of :

$(this).css("background-color", "#9683ec");
$(this).css("color", "#2d2746");

Finally you miss id selector sign # in :

$("footer").on("click", "#blue", function() {
__^

Full code :

jQuery(document).ready(function() {
    $("#footer").on("click", "#purple", function() {
         $(this).css({ "background-color": "#9683ec", "color": "#2d2746" })
    });

    $("#footer").on("click", "#blue", function() {
         $(this).css({ "background-color": "#00bfff", "color": "#002633" })
    });
});

Hope this helps.

edited Feb 21, 2016 at 16:08

answered Feb 21, 2016 at 16:02

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

2 Comments

LarsW Over a year ago

The #footer in should be a normal footer, I think.

LarsW Over a year ago

@ZakariaAcharki Of course, but since the HTML footer doesn't have an ID and you corrected it as if it was, I wanted to clarify it

caldera.sac · Accepted Answer · 2016-02-21 16:08:08Z

this is how you can do it.try this

<!DOCTYPE html>
    <html>
    <head>
    <title>hover</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <style type="text/css">
      body{
        margin:0;
        padding:0;
      }

   div.myclass{
    width: 100px;
    height: 100px;
    background-color: orange;
   }
  
  #mybotton{
    background-color: orange;
    color: black;
  }

    </style>

    </head>
    <body>

     <div class="myclass"></div>
     <br/>
     <button id="mybotton">my button</button>

   <script type="text/javascript">
   $(document).ready(function(){
    $(".myclass").click(function(){
      $(this).css({"background-color":"red"});
    });

    $("#mybotton").click(function(){
      $(this).css({"color":"white", "background-color":"red"});
    });

   });
   </script>

    </body>




    </html>

Nitin Garg · Accepted Answer · 2016-02-21 16:10:40Z

1

Try this solution

jQuery(document).ready(function() {
    
    $("#purple").click(function() {
       $(this).css("background-color", "#9683ec");
   });
   $("#blue").click(function() {
       $(this).css("background-color", "#00bfff");
   });
});

body {
	font-family: sans-serif;
	font-size: 1.2em;
  color: #091232;
	background-color: #00ced1;
  text-align: center;
}

button {
  border-radius: 20%;
	background-color: #ffff33;
  font-color: #000000;
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>#bothcats</title>

<body>
  <h1>Toph and Oscar</h1>
  <div id="container">
    <h2>#bothcats</h2>
    <img src="http://i.imgur.com/rEn4Ze8.png" style="max-width:80%">
    <p>Toph and Oscar are the ultimate duo.</p>
    <h2>You decide</h2>
    <p>Would you like to see them on blue or purple? Make your choice below.</p>
  </div>

</body>
<footer>
  <button id="purple">Purple</button>
  <button id="blue">Blue</button>
  <p>&copy;Allison Harris 2016</p>
</footer>

answered Feb 21, 2016 at 16:10

Nitin Garg

8866 silver badges7 bronze badges

2 Comments

Allison H. Over a year ago

Thanks, this was helpful! I'm now realizing that maybe I shouldn't be using "this" because I actually want to change the background color and text color of the entire page upon click. Could you help me with the logic of this?

Nitin Garg Over a year ago

In that case you can use $("body") instead of $(this).

Chihab JRAOUI · Accepted Answer · 2016-02-21 16:14:22Z

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
        </script>
        <style>
        body
        {
            text-align: center;
        }
        div
        {
            margin: auto;
            width: 200px;
            height: 100px;
            background-color: #ccc;
        }
        </style>
    </head>
    <body>
        <div class="myclass"></div>
        <br />
        <button id="purple">Purple</button>
        <button id="blue">Blue</button>

        <script>
            $(document).ready(function()
            {
                $("#purple").on('click', function()
                {
                    $('div').css("background-color", "purple");
                });
                $("#blue").on('click', function()
                {
                    $('div').css("background-color", "blue");
                });
            });
        </script>
    </body>
</html>

Collectives™ on Stack Overflow

Using jQuery to change background color on click

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related