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>

Answer 1

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> 

Answer 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();
}       
?>

Answer 3

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

Answer 4

 $('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> 

Answer 5

将id添加到按钮，然后是：

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

Answer 6

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.

Answer 7

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");
});

Answer 8

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

Answer 9

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');
}