0

I am trying to add a function into common.js that will change the background color of a button. Is this possible? thanks guys.

$('#api_search').style.backgroundColor('#e4e4e4');
Michael
  • 51
  • 1
  • 1
  • 8
  • 1
    Possible duplicate of [Changing button color programmatically](https://stackoverflow.com/questions/1819878/changing-button-color-programmatically) – met4000 Sep 19 '17 at 04:14
  • $('#api_search').css('background-color','#e4e4e4'); or $('#api_search').css('background','#e4e4e4'); both will work fine. – NK Chaudhary Sep 19 '17 at 04:17
  • Just wondering, but have you read the description for the [tag:commonjs] tag? _CommonJS is a project whose goal is to move JavaScript outside the browser._ Considering that, why would a function that selects a button and changes its background color be useful outside the browser...? – Patrick Roberts Sep 19 '17 at 04:19
  • Buttons exist in places other than the internet, Patrick. – 0x11 Sep 19 '17 at 04:20
  • Patrick its because other parts of the program that it uses is already inside of the common js. Basically its a form with 2 select options and the button isnt clickable until both options have been given an input. Once they are both clicked the button is active but I also want the color to change on the button. – Michael Sep 19 '17 at 21:37

3 Answers3

1

You're using a jquery selector which means you'll have different functions/properties available to you than accessing DOM elements in vanilla javascript. Using this approach, you can set multiple css declarations in one function. If you wanted to change other styling properties, you would just add them to the object passed as the argument to css.

{backgroundColor:'#e4e4e4', color: '#fff', ...}

So you could use .css as follows: 

 $('#api_search').click(function() { 
  $(this).css({backgroundColor:'#e4e4e4'})
 });

try it here with a button

see jquery css() documentation here

Josh Bowling
  • 313
  • 3
  • 10
1

If you're trying to do this with Javascript, you could do something like the following:

document.getElementById("api_search").addEventListener("click", function(e) {
    e.target.style.backgroundColor = "red";
});

Check this out for clarity:

https://jsfiddle.net/9p3f9yjw/2/

0x11
  • 173
  • 8
1
$('#api_search').css("background","#e4e4e4");

or 

$('#api_search').attr("style","background:#e4e4e4");
Surajit
  • 89
  • 5
  • Your two suggestions doesn't work the exact same way. The second suggestion will replace any existing style already on the element, while the first will simply add the background color to the styling. – Nikolaj Dam Larsen Sep 19 '17 at 05:56
  • you have to use jquery event to change the background color. $('#api_search').hover(function(){ $(this).css("background","#e4e4e4"); }); – Surajit Sep 19 '17 at 06:41
  • No, you don't have to use jquery. How do you think jquery changes the background color behind the scenes? That wasn't my point though. My point was that with your second suggestion, if for instance your element looks like this `

    `, then applying your second method, the border styling will be removed. That might not be the intent. Your first suggestion is fine though.     – Nikolaj Dam Larsen Sep 19 '17 at 06:46
  • Yes, you are right. But I can use jquery or css to change background color. .css() will not replace the previous css property. And .attr() will add an attribute in html tag. So It will replace the previous attribute. – Surajit Sep 19 '17 at 09:37