javascript - Using jQuery to change background color on click - Stack Overflow

admin管理员组

文章数量:1389783

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");
    });
});

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");
    });
});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 21, 2016 at 16:08 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Feb 21, 2016 at 15:58 Allison H.Allison H. 4511 silver badge99 bronze badges 5

• 1 You're not referencing jQuery in your fiddle. – Yass Commented Feb 21, 2016 at 16:03
• Thanks for the feedback. I'm not sure if I understand what you mean. Can you tell me more? – Allison H. Commented Feb 21, 2016 at 16:06
• are you sure that you have linked jquery correctly – caldera.sac Commented Feb 21, 2016 at 16:14
• add this to your project <script src="https://ajax.googleapis./ajax/libs/jquery/1.12.0/jquery.min.js"></script> – 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 Commented Feb 21, 2016 at 16:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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");
  });
});

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.

this is how you can do it.try this

<!DOCTYPE html>
    <html>
    <head>
    <title>hover</title>
   <script src="https://ajax.googleapis./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>

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./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./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>

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis./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>

本文标签： javascriptUsing jQuery to change background color on clickStack Overflow