On/off button

[skinicod]

Hi All,

I have a series of buttons that I want to be on/off style buttons - i.e. click once to turn on and once to turn off. In order to show that any given button is on, the button text will turn white, and when off it will turn brown.

I have all this working, except that if a user does not move the mouse off of the button and wants to turn the button on and off, the color stops changing after the first on/off. Wondering if anyone can shed any light on why this is. The relevant javascript is as follows:

var mySelectedTop = 'None';
var lightCol = '#E6E4DE';
var darkCol = '#2E0E03';

function changeTopColor(buttonID, newColor){
 if(mySelectedTop != buttonID){
  myDiv=document.getElementById(buttonID);
  myDiv.style.color = newColor;
 }
}

function topSelect(buttonID){
 if(buttonID == mySelectedTop){
  mySelectedTop = 'None';
  changeTopColor(buttonID,darkCol);
 }
 else{
  currentSelected = mySelectedTop;
  mySelectedTop = buttonID;
  changeTopColor(currentSelected,darkCol);
  changeTopColor(mySelectedTop,lightCol)
 }
}

and a link to the example website I'm working on is here (it is the 5 buttons at the top that are causing me grief):

http://www.oldboymusic.com/testsite"]

http://www.oldboymusic.com/testsite

[/URL]

Any help is massively appreciated.

Cheers,

skinicod.

 

[Wolfie7873]

Try triggering the function call with an onClick event in your div. That's what that function is for, when you want something to happen when you click.

 

[Geates]

using the onClick event in your div tag would also allow you to pass the div as an object to a function using "this". Consider,

var lightCol = '#eeeeee';
var darkCol = '#333333';

function toggleColor (objDiv) {
    alert(objDiv.style.color);
    if (objDiv.style.color == lightCol) {
	    objDiv.style.color = darkCol;
	}
	else {
	    objDiv.style.color = lightCol;
	}
}

Your button div would make use of the onClick event, as Wolfie suggested, by passing "this" (the div element) to the toggleColor function.

<div onClick="toggleColor(this);">Button</div>

Note: DIVs don't really have any contextual meaning. An anchor, <a>, may be more appropriate.

-Geates


"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[Geates]

minus the alert

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon