Member Avatar for proprasee

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 because: n/a
  • 2 Contributors
  • 2 Replies
  • 68 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Recommended Answers

All 2 Replies

Member Avatar for Airshow

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

Member Avatar for Airshow

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 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.