There is one related question, but it is more advanced than this. I am simply trying to use jQuery to change both the background color and text color of the button holding my footer. The click on function is working fine with the background color, but the text is not changing colors. What am I missing? Here is my jQuery code:

jQuery(document).ready(function() {
    $("button").on("click", "footer", function() {
        $(this).css("font-color", "#ff99ff");
        $(this).css("background-color", "#000066");
    });
});

Here is a link to the jsfiddle: /

There is one related question, but it is more advanced than this. I am simply trying to use jQuery to change both the background color and text color of the button holding my footer. The click on function is working fine with the background color, but the text is not changing colors. What am I missing? Here is my jQuery code:

jQuery(document).ready(function() {
    $("button").on("click", "footer", function() {
        $(this).css("font-color", "#ff99ff");
        $(this).css("background-color", "#000066");
    });
});

Here is a link to the jsfiddle: https://jsfiddle/qjawmyu1/

• javascript
• jquery
• html

• 2 Use jQuery to add a CSS class to the button. And use CSS to change the font and background color of button. – Tushar Commented Jan 25, 2016 at 16:52
• 2 $("button").on("click", "footer", function() { huh? <footer> inside <button>. – Tushar Commented Jan 25, 2016 at 16:53
• <footer> inside <button>?? Sure looks like selectors are reversed – charlietfl Commented Jan 25, 2016 at 16:55
• There is no such css value as font-color. It's just color. And the way to n do this would be to make a class in css and apply/ toggle that with jquery – lucas Commented Jan 25, 2016 at 16:55
• Even if that'll work it is considered bad practice to use block-elements inside button. If you're not using it as button, I'll suggest to remove it and just keep footer. – Tushar Commented Jan 25, 2016 at 17:02

4 Answers 4

The CSS property to set the font colour is just color. Note that you can use a single call to css() if you provide an object. Try this:

$("button").on("click", "footer", function() {
    $(this).css({
        color: '#ff99ff',
        backgroundColor: '#000066'
    });
});

Also, it's considered better practice to keep your styles in a separate stylesheet and use jQuery to add/remove classes from elements only. Try this:

.active {
    color: #ff99ff;
    background-color: #000066;
}

$("button").on("click", "footer", function() {
    $(this).addClass('active');
});

Finally, your placement of a footer inside button element is invalid. You should reverse those elements.

The property to change the font color is not font-color but just color

So you can try something like this

jQuery(document).ready(function() {
    $("button").on("click", "footer", function() {
       $(this).css("color", "#ff99ff");
       $(this).css("background-color", "#000066");
   });
});

Set up CSS classes for both states (before and after clicked), then simply call JQuery's removeClass() and addClass() inside your action/event method.

Also, you can make your code simpler by using IDs for your button element and calling the JQuery click() function instead.

CSS:

button .button-default {
    ...
}

button .button-clicked {
    color: #ff99ff;
    background-color: #000066;
}

JS:

$("#button").click(function() {
    $(this).removeClass('button-default');
    $(this).addClass('button-clicked');
});

Credit to Tushar for mentioning this in another answer.

I think you wanna swap the footer and button around from

$("button").on("click", "footer", function() {

to

$("footer").on("click", "button", function() {

as i guess the button is inside the footer and the footer is not inside the button