HTML - How to change button background color on OnClick event

Question

I have following PHP code where 4 buttons are displaying dynamically from database table. Different content is displaying on page based on clicked button.

Now, I want to do so when I click 1st button then button bg color should be changed so visitor can know which button is pressed. When 2nd button is clicked then bg color of that button should be changed and previously clicked button (1st button in this example) should be restored with original color.

Please let me know easiest way to do this using either CSS or Javascript.

<form name="frm_list" action="toptipper.php" method="post" enctype="multipart/form-data">

<?php 
while(!$rs_tab_list->eof())
{
?>

<button type="submit" name="btn_tab" value="<?php print($rs_tab_list->fields("tabpkid")); ?>"><?php print($rs_tab_list->fields("title")); ?></button>

<?php  
$rs_tab_list->movenext();
}       
?>

</form>

score 5 · Accepted Answer · answered Nov 11 '14 at 10:05

5

Uncomment out the comment marks if you want only one selected at a time.

$('button').on("click",function(){  
  //$('button').not(this).removeClass();
  $(this).toggleClass('active');
  
  });

.active{background-color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>
<button>3</button>

answered Nov 11 '14 at 10:05

Billy

2,448
1
10
13

Thanks for response, your code is working fine here. http://jsfiddle.net/hjLn7dym/ ... But for some reason, it's not working on page. What may be possible issue? Please help. – K Ahir Nov 11 '14 at 10:24
have you got jquery included ? i'll do a quick plain js version, give me a mo. – Billy Nov 11 '14 at 10:34
Yes, I included jquery file as you mentioned in your example. – K Ahir Nov 11 '14 at 10:41
won't bother with the plain js. Can't really understand what is happening. Check that all code is copied, ie,check semicolons etc. have a look in the console for any clues. I have to go out now but back in a while and we'll sort it out. – Billy Nov 11 '14 at 10:53
Got the problem. JS code should be written after HTML button code. Also this code works fine but my page is refreshed whenever button is clicked so i needed to do some programming related things to get required result. Thank you for your all help. – K Ahir Nov 12 '14 at 07:29

score 2 · Answer 2 · answered Nov 11 '14 at 09:36

2

Write JS Onclick event like this onclick="this.style.backgroundColor = 'red';"

<?php 
while(!$rs_tab_list->eof())
{
?>

<button type="submit" name="btn_tab"  onclick="this.style.backgroundColor = 'red';" value="<?php print($rs_tab_list->fields("tabpkid")); ?>"><?php print($rs_tab_list->fields("title")); ?></button>

<?php  
$rs_tab_list->movenext();
}       
?>

answered Nov 11 '14 at 09:36

Mahendra Jella

5,450
1
33
38

Thank you for your reply, Red color is removed once button is clicked, I want it to be there until I press other button. Please let me know what change I need to do in code to work as per requirements. – K Ahir Nov 11 '14 at 09:49

score 1 · Answer 3 · answered Nov 11 '14 at 09:40

I don't know if changing the button color like this is the best design decision, but just in case it's purely for learning purposes:

1) give the 2 buttons different IDs

2) use this javascript code

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   }

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";  }

Live example:

JS Fiddle - click the buttons and see how the colors change

score 1 · Answer 4 · answered Sep 09 '16 at 00:39

$('button').on("click",function(){  
  //$('button').not(this).removeClass();
  $(this).toggleClass('active');
  
  });

.active{background-color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>
<button>3</button>

score 0 · Answer 5 · answered Nov 11 '14 at 09:26

0

add id to button and then something like:

$('#buttonID').css('background-color','coloryouwant');

answered Nov 11 '14 at 09:26

Sergey Scopin

2,217
9
39
67

score 0 · Answer 6 · answered Nov 11 '14 at 09:35

In case you want to restore the intial value of the previous button, an easy way to do this is with jQuery. You can use the addClass() routine for this. For example:

//Restore all values
$("input").removeClass();
$("input").addClass("default");

//Set class that has the highlight color
$("#button2").addClass("highlight");

With this HTML:

<input type="button" id="button1"/>
<input type="button" id="button2"/>

And this CSS:

.default { background-color: blue;}
.highlight { background-color: yellow;}

Just add the onClick to the element to call the right functions.

Hope it helps.

score 0 · Answer 7 · answered Nov 11 '14 at 09:37

0

It is pretty direct with jquery. I advice to add class using jquery and style the button later. Below fiddle helps you.

http://jsfiddle.net/kiranvarthi/oudkau4j/

$("button").click(function(){ 
    $(this).addClass("active");
});

answered Nov 11 '14 at 09:37

KiV

2,225
16
18

score 0 · Answer 8 · answered Nov 11 '14 at 09:38

You can use js. Create class .active and define it in your css:

.active {
    background-color: #yourcolor;
}

Now using js jquery you can make onclick event and add class on clicked button:

$('#yourbtnid').click(function() {
    $(this).addClass('active');
}

!Don't forget to import jquery library before your js file or code in html file

score 0 · Answer 9 · answered Nov 11 '14 at 10:16

0

in the button you can call a jquery function like

<input type="button" onClick=colorchange();>

/* in the jquery function you can do.*/

function colorchange(){
$(this).css('background-color','#000000');
}

answered Nov 11 '14 at 10:16

priya786

1,804
12
11

HTML - How to change button background color on OnClick event

9 Answers9