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

Using jQuery to change background color on click

Answers (5)

Reputation: 2668

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

Upvotes: 1

Chihab JRAOUI

Reputation: 216

<!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>

Upvotes: 1

Nitin Garg

Reputation: 896

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>

Upvotes: 1

caldera.sac

Reputation: 5088

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>

Upvotes: 1

Zakaria Acharki

Reputation: 67505

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.

Upvotes: 1

Using jQuery to change background color on click

Answers (5)

Related Questions