0

i have 10 button on click of button the colou change red ,blue alternatively . There is also an array initialised with zero ,by default buttons are red in colour. these are implemented but there is problem on click of each button the php corresponding array variable must changed to 1 for blue and 0 for red .how can i implement this .

Edited by proprasee: n/a

2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by Airshow
0

Proprasee,

Something like this maybe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
button { float:left; width:50px; height:50px; margin:2px; color:#FFF;  }
</style>

<script>
onload = function(){
	var buttons = document.getElementsByTagName('button');
	for(var i=0; i<buttons.length; i++){
		if(buttons[i].className.indexOf('type1')>=0 || buttons[i].className.indexOf('type2')>=0){
			buttons[i].style.backgroundColor = (buttons[i].className.indexOf('type1')>=0) ? '#0000c0' : '#c00000';//initialise colors
			buttons[i].onclick = function(){//attach onclick handler
				this.style.backgroundColor = (this.style.backgroundColor.toLowerCase() == '#c00000' ) ? '#0000c0' : '#c00000';//swap colors
				this.blur();//kill marquee
			}
		}
	}
}
</script>
</head>

<body>

<button class="type1">1</button>
<button class="type2">2</button>
<button class="type1">3</button>
<button class="type2">4</button>
<button class="type1">5</button>
<button class="type2">6</button>
<button class="type1">7</button>
<button class="type2">8</button>
<button class="type1">9</button>
<button class="type2">10</button>

</body>
</html>

Airshow

0

OK, I posted in a hurry earlier before I went to work, knowing the was something funny about Firefox. This is one instance of IE getting it so right and Moz so wrong.

For x.style.backgroundColor , FF returns rgb(r, g, b) , whereas IE returns the far more useful (99% of the time) #rrggbb . I think IE 7/8 will be OK but you had better test them.

Here's some better code - tested in IE6, and latest FF / Opera

Opera fails to vertical-align button text correctly - but that's to do with Opera's CSS/rendering engine not the javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
button { float:left; width:50px; height:50px; margin:2px; color:#FFF;  }
</style>

<script>
//With thanks to posters at http://bytes.com/topic/javascript/answers/712910-style-backgroundcolor-returns-rgb-but
function RGBtoHEX(str){//Necessary for Moz
	var arr, r, g, b;
	arr = str.split(",");
	r = DECtoHEX(arr[0].substring(4));
	g = DECtoHEX(arr[1]);
	b = DECtoHEX(arr[2].substring(0,arr[2].length-1));
	return "#"+r+g+b;
} 
function DECtoHEX(N) {
	hex_set = "0123456789ABCDEF";
	return hex_set.charAt((N-N%16)/16) + hex_set.charAt(N%16);
} 

onload = function(){
	var buttons = document.getElementsByTagName('button');
	for(var i=0; i<buttons.length; i++){
		if(buttons[i].className.indexOf('type1')>=0 || buttons[i].className.indexOf('type2')>=0){
			buttons[i].style.backgroundColor = (buttons[i].className.indexOf('type1')>=0) ? '#0000c0' : '#c00000';//initialise colors
			buttons[i].onclick = function(){//attach onclick handler
				var hexStr = (this.style.backgroundColor.substring(0,3)=='rgb') ? RGBtoHEX(this.style.backgroundColor) : this.style.backgroundColor;//Cater for Moz's annoying rgb(r, g, b) color values.
				this.style.backgroundColor = (hexStr.toLowerCase() == '#c00000' ) ? '#0000c0' : '#c00000';//swap colors
				this.blur();//kill marquee
			}
		}
	}
}
</script>
</head>

<body>

<button class="type1">1</button>
<button class="type2">2</button>
<button class="type1">3</button>
<button class="type2">4</button>
<button class="type1">5</button>
<button class="type2">6</button>
<button class="type1">7</button>
<button class="type2">8</button>
<button class="type1">9</button>
<button class="type2">10</button>

</body>
</html>

Airshow

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.