Changing a button's background color when it's clicked

Question

I'm trying to change the background-color property of a button using JavaScript. The script checks what the current background-color is set to and then toggles it. This is the JavaScript code:

function btnColor(btn,color) {
    var property=document.getElementById(btn);
    if (property.style.background-color == "#f47121") {
        property.style.background-color=Color;
    }
    else {
        property.style.background-color = "#f47121";
    }
}

and this is what I pass in html:

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','#fff200');" />

toggleLayer is another function I am using, which works perfectly fine. I can't seem to figure out why it doesn't work.

background minus color? You've even got spaces around the subtraction operator! — Quentin, Jun 06 '13 at 15:29
You are calling the function btnColor, but your function is called setColor — Marc-André Bilodeau-Lamontagne, Jun 06 '13 at 15:29

score 4 · Answer 1 · edited Jun 06 '13 at 15:54

4

Why not just use jQuery?

Core Javascript is so raw! If you're just changing the background-color then use the on click event in jQuery:

$('#btnHousing').click(function() {
    //Now just reference this button and change CSS
    $(this).css('background-color','#f47121');
});

Personally for me it reads so much better then raw javascript.

Regards

edited Jun 06 '13 at 15:54

Jimbo

25,790
15
86
131

answered Jun 06 '13 at 15:32

Tez Wingfield

59
1

2

If they're just changing a button background only, there is no need to load in a 32kb file for one event. – Seth Jun 06 '13 at 15:36
1

@Seth no one writes just one function in a project..Jquery is an extention and performs much better. yes i agree that loading in the file for one event is overkill. – Tez Wingfield Jun 06 '13 at 15:45

Marc-André Bilodeau-Lamontagne · Answer 2 · 2013-06-11T17:42:09.847

3

I made a working example in JsBin : LINK HERE

I renammed the function to setColor
I changed the property property.style.background-color by window.getComputedStyle(property).backgroundColor

edited Jun 11 '13 at 17:42

answered Jun 06 '13 at 15:31

Marc-André Bilodeau-Lamontagne

888
3
11
32

It works but it doesn't toggle back to the color you pass it in the html function call i.e. '#fff200'. – ayush Jun 06 '13 at 15:52
Pass it an rgb value. Hex seems to be converting improperly. Or make your own rgbToHex function that works properly, and pass that as the color. – Seth Jun 06 '13 at 19:53
It doesn't seem to work with rgb values either. I tried putting alerts and for some reason it skips the if statement and jumps to the else part every single time. – ayush Jun 11 '13 at 14:33
There is a working version : http://jsbin.com/ebubop/7/edit I updated my original post – Marc-André Bilodeau-Lamontagne Jun 11 '13 at 17:41

Jocker · Answer 3 · 2013-06-07T09:17:44.527

Try this function in your javascript :

function setColor(btn,color){
    var property=document.getElementById(btn);
    if (property.style.backgroundColor == "#f47121") {
        property.style.backgroundColor = color;
    } else {
        property.style.backgroundColor = "#f47121";
    }
}

To avoid repeating the id of your input in the onclick attribute, you can do this :

HTML :

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor(this, '#fff200');" />

JavaScript (be careful, the var names are case sensitive, cf. Color => color) :

function setColor(btn, color){
    if (btn.style.backgroundColor == "#f47121") {
        btn.style.backgroundColor = color;
    } else {
        btn.style.backgroundColor = "#f47121";
    }
}

score 1 · Answer 4 · edited Oct 23 '14 at 03:24

1

Change your code to this...

function btnColor(btn, color) {
    var property = document.getElementById(btn);
    if (property.style.backgroundColor == "#f47121") {
        property.style.backgroundColor = Color;
    } else {
        property.style.backgroundColor = "#f47121";
    }
}

Hyphenated css attributes are camel cased in JS. For example background-color becomes -> backgroundColor

The above code should work.

edited Oct 23 '14 at 03:24

answered Jun 06 '13 at 15:34

Seth

10,198
10
45
68

Tried this and with ['backgroundColor'] and ['background-color']. Doesn't work! – ayush Jun 06 '13 at 15:46
background-color won't work either way. Are you sure you have your function call named properly on the input field? I saw you edited it earlier because the names were conflicting with the function declaration. `document.getElementById(element).style.backgroundColor = color` is how you set the background color, substituting element and color or passing in variables. Double check if `function btnColor` and `onclick="toggleLayer('transparent1');btnColor(this, '#fff200');"` are using the same function names. – Seth Jun 06 '13 at 19:48
Made sure the function calls were the same and the backgroundColor was used.Still doesn't work. – ayush Jun 11 '13 at 14:23

Changing a button's background color when it's clicked

4 Answers4

Linked