I want to change color of button after clicking on it.I have tried with css and javascript but it doesn't work for me. Here is the css code

<style>
.style {
    width: 115px;
    height: 45px;
    background: #8CC639;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    color: #3071A9;
    font-weight: bold;
    cursor: pointer;
}

.style:hover {
background: blue;
}
 .style:active{
background: blue;

} */
.style:visited {
    color: red;
}

</style>

And here is the content in my jsp page:

    <script>

    $(document).ready(function(){
        $('#btnHousing').click(function() {
            //Now just reference this button and change CSS
            $(this).css('background-color','#f47121');
        });
        $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
        ui.panel.html(
        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
        "If this wouldn't be a demo." );
        });
        }
        });

    })(jQuery);
    </script>

    <div class="page">

    <fieldset>
    <form>

    <div align="center">
    <input  type = "button"
           value = "Throw"
         onclick = "javascript:location.href='throw.html';"
    />

    <span class="right">
    <input  type = "button" id="style"
           value = "User"
         onclick = "javascript:location.href='userAction.html'; "
    />
   </div>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Create</a></li>
            <!--    <li><a href="user/viewLogin.html">Log In</a></li> -->
                <li><a href="#tabs-2">Update</a></li>

            </ul>

            <div id="tabs-1">
                <h1>Create</h1>

            </div>
            <div id="tabs-2">
                <h1>Update</h1>
            </div>


        </div>

      </form>
      </fieldset>
    </div>

I want like stackoverflow button.When user click on button the color of button change after clicking on it.I have tried in some ways.Any code in css ,JQuery ore javascript?Thank you!

I want to change color of button after clicking on it.I have tried with css and javascript but it doesn't work for me. Here is the css code

<style>
.style {
    width: 115px;
    height: 45px;
    background: #8CC639;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    color: #3071A9;
    font-weight: bold;
    cursor: pointer;
}

.style:hover {
background: blue;
}
 .style:active{
background: blue;

} */
.style:visited {
    color: red;
}

</style>

And here is the content in my jsp page:

    <script>

    $(document).ready(function(){
        $('#btnHousing').click(function() {
            //Now just reference this button and change CSS
            $(this).css('background-color','#f47121');
        });
        $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
        ui.panel.html(
        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
        "If this wouldn't be a demo." );
        });
        }
        });

    })(jQuery);
    </script>

    <div class="page">

    <fieldset>
    <form>

    <div align="center">
    <input  type = "button"
           value = "Throw"
         onclick = "javascript:location.href='throw.html';"
    />

    <span class="right">
    <input  type = "button" id="style"
           value = "User"
         onclick = "javascript:location.href='userAction.html'; "
    />
   </div>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Create</a></li>
            <!--    <li><a href="user/viewLogin.html">Log In</a></li> -->
                <li><a href="#tabs-2">Update</a></li>

            </ul>

            <div id="tabs-1">
                <h1>Create</h1>

            </div>
            <div id="tabs-2">
                <h1>Update</h1>
            </div>


        </div>

      </form>
      </fieldset>
    </div>

I want like stackoverflow button.When user click on button the color of button change after clicking on it.I have tried in some ways.Any code in css ,JQuery ore javascript?Thank you!

• javascript
• jquery
• css

• @hex494D49 That is wrong. CSS needs the # and 3 or 6 digits. Any other number will result in it not parsing. – Claudia Commented Aug 6, 2014 at 23:04
• Do you actually have a button with id=btnHousing? – PM 77-1 Commented Aug 6, 2014 at 23:05
• 1 Can't see any element with an id of btnHousing for the javascript to run, the CSS is also targeting elements with the .style class, and there is nothing in this HTML with a class of style, not to mention the fact that you seem to have a orphan ment close in there */ – OJay Commented Aug 6, 2014 at 23:06
• It doesn't work my friend( hex494D49 )...I don't have a element with id "btnHousing",i want to use this late,it doesn't have an relationship..(PM 77-1) – Fation Hadri Commented Aug 6, 2014 at 23:09
• @FationHadri, when directing a ment to someone on StackOverflow, make sure to put a @ before their name. This will cause them to get a notification about your ment so they know it is there and can read it. For instance, in your previous ment you could have used @hex494D49. Also, there is no harm in it, but you don't need to do it for the owner of the Question or Answer you are menting on, they get notifications for all ments on their post. In this case since your ment was about an answer not a ment on the question, the ment should have been on the answer. – Useless Code Commented Aug 6, 2014 at 23:49

4 Answers 4

You used a class css selector rather than an id selector.

change the style to

#style

instead of

.style

or change the button to say

class="style"

document.getElementById('id-of-the-button').onclick = function(){
    this.style.backgroundColor = '#ff0000';
};

Or

<style type="text/css">
  .red {background-color: #ff0000;}
</style>  

document.getElementById('id-of-the-button').onclick = function(){
  this.className = 'red';
};

You can try this:

var button = document.querySelector("button");
button.addEventListener("click", function() {
  document.body.classList.toggle("purple");
  //the purple is a css class
})

Your click handling seems to be ok.

It seems you just don't have a button with id "btnHousing".

A tested working example based on your code:

<input type="button" id="btnHousing" value="Housing"/>
<script>
    $('#btnHousing').click(function() {
        //Now just reference this button and change CSS
        $(this).css('background-color','#f47121');
    });
</script>