JS & buttons
Posted: Wed Aug 05, 2009 6:28 am
I'm developing a new on-line questionnaire, and I have several problems concerning HTML, CSS & JS interaction. I'm trying to put up several buttons in a table row, with stylish CSS :hover pseudoclass, hence make those buttons capable of changing colour with "onclick" event. I figured out that this can ONLY be done through JavaScript, because of CSS-JS conflict.
I want to make users able to give an answer to some question by clicking on the button, and for feedback purposes, when they click on that button, it changes colour e.g. to blue (default colour: gray). If they click on the another button in the same row, that button changes colour (blue), while the other buttons switch to default gray. Currently I mannaged to write JS script that changes button colour with onmouseover and onmouseout event - similar to :hover pseudoclass in CSS, and also with onclick event. Suppose that a button is gray when mouse is out (default), green when mouse is over, and blue on click. The problem is: on button click, colour changes to blue, on mouse out colour switches to default, and while hovering, it's green. Complete madness!!!
I would like to retain that clicked-blue colour!!! How?!?
I reckon that I've confused you a bit, but what I want to do is quite simple: write a JavaScript function(s) that make(s) buttons gray by default (mouseover), green while hovering, and blue on click. If a user clicks another button, it becomes blue, the others switch to default (gray), and green hover colour remains while moving mouse over the buttons.
In order to present you the problem(s) I'm struggling with, I'll post HTML, CSS and JavaScript codes, respectively. Here goes:
HTML code:
CSS code:
JavaScript code:
I want to make users able to give an answer to some question by clicking on the button, and for feedback purposes, when they click on that button, it changes colour e.g. to blue (default colour: gray). If they click on the another button in the same row, that button changes colour (blue), while the other buttons switch to default gray. Currently I mannaged to write JS script that changes button colour with onmouseover and onmouseout event - similar to :hover pseudoclass in CSS, and also with onclick event. Suppose that a button is gray when mouse is out (default), green when mouse is over, and blue on click. The problem is: on button click, colour changes to blue, on mouse out colour switches to default, and while hovering, it's green. Complete madness!!!
I would like to retain that clicked-blue colour!!! How?!?
I reckon that I've confused you a bit, but what I want to do is quite simple: write a JavaScript function(s) that make(s) buttons gray by default (mouseover), green while hovering, and blue on click. If a user clicks another button, it becomes blue, the others switch to default (gray), and green hover colour remains while moving mouse over the buttons.
In order to present you the problem(s) I'm struggling with, I'll post HTML, CSS and JavaScript codes, respectively. Here goes:
HTML code:
Code: Select all
<html>
<body>
<div>
<table>
<tr>
<td><input type = "button" id = "button11" class = "button" value = "one"
onmouseover = "btClick('button11','#B4DB6F')"
onmouseout = "btClick('button11','#BFBFBF')"
onclick = "btClick('button11','#0788C3')"><td>
<td><input type = "button" id = "button12" class = "button" value = "two"
onmouseover = "btClick('button11','#B4DB6F')"
onmouseout = "btClick('button11','#BFBFBF')"
onclick = "btClick('button12','#0788C3')"><td>
<td><input type = "button" id = "button13" class = "button" value = "three"
onmouseover = "btClick('button11','#B4DB6F')"
onmouseout = "btClick('button11','#BFBFBF')"
onclick = "btClick('button13','#0788C3')"><td>
</tr>
<tr>
<td><input type = "button" id = "button21" class = "button" value = "four"
onmouseover = "btClick('button11','#B4DB6F')"
onmouseout = "btClick('button11','#BFBFBF')"
onclick = "btClick('button21','#0788C3')"><td>
<td><input type = "button" id = "button22" class = "button" value = "five"
onmouseover = "btClick('button11','#B4DB6F')"
onmouseout = "btClick('button11','#BFBFBF')"
onclick = "btClick('button22','#0788C3')"><td>
<td><input type = "button" id = "button23" class = "button" value = "six"
onmouseover = "btClick('button11','#B4DB6F')"
onmouseout = "btClick('button11','#BFBFBF')"
onclick = "btClick('button23','#0788C3')"><td>
</tr>
</table>
</div>
<body>
<html>
Code: Select all
input.button{
color:white;
background-color:#BFBFBF;
width:60px;
height:25px;
border:0px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
Code: Select all
function btClick(idbut, col) {
var butt = document.getElementById(idbut);
butt.style.backgroundColor = col;
}