Change button-color when clicked

Question

I have tried for couple of days now to find a way to change the color of my button when clicked in javascript or PHP. I already have a button with the CSS: #btnMenu.
This is the button:

<a href="/?nav=home"><input id="btnMenu" type="button" value="Hjem"/></a>

The button is: background-color: grey;
When it's clicked, I want the button to be: background-color: red;

I think that it can't be done in CSS but can I change the background i javascript og PHP?

href and input? plus, you do now that `/?` looks for the index at the root. — Funk Forty Niner, Jun 02 '15 at 12:42
*"It works"* - if it works, then why the question? lol plus, not enough code — Funk Forty Niner, Jun 02 '15 at 12:43
the button works but i cant change the background-color when clicked!! — NickiJey, Jun 02 '15 at 12:44
when you click the button it will goes to that link then what is the need of changing color.? and where it will reflect? — Alive to die - Anant, Jun 02 '15 at 12:44
Becouse the button is fixed to the page. There is always 5 buttons on the left side of my page! — NickiJey, Jun 02 '15 at 12:45
use css `:active` psuedoclass. like this: `#btnMenu:active{ background-color:grey; }` — yaakov, Jun 02 '15 at 12:54
possible duplicate of [Change Button color onClick](http://stackoverflow.com/questions/26937424/change-button-color-onclick) — mohit, Jun 02 '15 at 12:54
Have a look on the solution below This problem is because after clicking on button page is getting refreshed... — PHP Worm..., Jun 02 '15 at 12:59
you asked and people have answered. take your pick from answers given below and accept it to mark yours as solved — Funk Forty Niner, Jun 02 '15 at 13:17

score 3 · Answer 1 · edited Jun 02 '15 at 13:02

3

jQuery is pretty easy to use to do things like this. PHP (being server side) isn't designed for making changes to the page after it has loaded.

You can try something like this:

$('#btnMenu').click(function(){
   $(this).css('background-color', 'red');
});

edited Jun 02 '15 at 13:02

A1rPun

16,287
7
57
90

answered Jun 02 '15 at 12:45

Geoff Atkins

1,693
1
17
23

This question is not tagged [jquery] – A1rPun Jun 02 '15 at 12:46
Thets true but Thank you. I will try that one :) Could you at the same time try to explain me what jQuery is? The short answere? – NickiJey Jun 02 '15 at 12:47
"jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers." - From the jQuery Website. You'll need to load the jQuery library, either from your own site or from a CDN. @A1rPun, you are right - it's not tagged as jQuery. – Geoff Atkins Jun 02 '15 at 12:49
1

@A1rPun still, question is unclear. Plus, OP did tag as javascript, which is what jQuery is. – Funk Forty Niner Jun 02 '15 at 12:49
@Fred-ii- JavaScript !== jQuery. jQuery is written in JavaScript but that doesn't mean that you need to use a library do to someting trivial. – A1rPun Jun 02 '15 at 12:52
@A1rPun had the OP written something like: *"I don't want jQuery solutions...."*, then I'd agree. The question is open, far as I'm concerned. – Funk Forty Niner Jun 02 '15 at 12:53
1

@Fred-ii- The OP didn't know about jQuery so he couldn't know. I could provide a .NET solution because he didn't ask for it.. that's not how SO works. I just want to prevent a dependancy for something really simple. – A1rPun Jun 02 '15 at 12:56
1

@A1rPun sure, I'll agree and you have a point there. However, a jQuery solution is still an option, nonetheless. – Funk Forty Niner Jun 02 '15 at 12:58
1

@Fred-ii- Cool, I think I have to accept that jQuery is taking over the world ;) – A1rPun Jun 02 '15 at 12:59
@A1rPun Lordie, I found it the best thing since sliced bread when that came out and was right there when it did. I did away from using Flash when it did. – Funk Forty Niner Jun 02 '15 at 13:01

score 1 · Answer 2 · answered Jun 02 '15 at 12:45

1

I don't think a a and button is a good combination. However, you can use this code to change background color of button.

document.getElementById('btnMenu').onclick = function(){
 this.style.backgroundColor = "red";
}

answered Jun 02 '15 at 12:45

Zee

8,420
5
36
58

Manashvi Birla · Answer 3 · 2015-06-02T12:47:35.177

1

document.getElementById('btnMenu').onclick = function(){
 this.style.backgroundColor = "red";
}

edited Jun 02 '15 at 12:47

answered Jun 02 '15 at 12:45

Manashvi Birla

2,837
3
14
28

score 1 · Answer 4 · answered Jun 02 '15 at 12:46

<input type="button" id="btnMenu" value="Hjem" style="color:white" onclick="setColor()"; />

 var count = 1;
function setColor() {
    var property = document.getElementById(btnMenu);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "#7FFF00"
        count = 0;
    }
}

score 1 · Answer 5 · edited Jun 02 '15 at 13:01

Try this,

JavaScript:

    var count = 1;
    function setColor() {
        var property = document.getElementById('btnMenu');
        if (count == 0) {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

HTML

<input id="btnMenu" type="button" value="Hjem" onclcik="setColor();"/>

score 1 · Answer 6 · answered Jun 02 '15 at 12:50

Try this

html

<a href="/?nav=home"><input id="btnMenu" type="button" value="Hjem"/></a>

Javascript

document.getElementById('btnMenu').onclick = function(){
 this.className = 'blueColor';
}

css

.blueColor{
    background:blue;
}

http://jsfiddle.net/826fhe99/2/

PHP Worm... · Answer 7 · 2015-06-02T13:05:03.950

As you are using a (anchor) for a button so after clicking page will be refreshed so in such case to change color of button you should try this:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<a href="/?nav=home"><input id="btnMenu" type="button" value="Hjem"/></a>

<script>
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}



  $(document).ready(function(){

          var param = getParameterByName('nav');
          if(param == 'home'){
              $('#btnMenu').css("background-color", "red");
          }

})
</script>

Change button-color when clicked

7 Answers7