i have 10 buttons by default colour is red. for each click its colour changes to blue then red that was implemented. The problem is i ahave an array of 10 elements.initially value 0. when button changes to blue corresponding value changed to 1 for red -0 how can i implemented please help me

i have 10 buttons by default colour is red. for each click its colour changes to blue then red that was implemented. The problem is i ahave an array of 10 elements.initially value 0. when button changes to blue corresponding value changed to 1 for red -0 how can i implemented please help me

must be done through javascript... if u can show the existing code, we can suggest u some modifications...

i have 10 buttons by default colour is red. for each click its colour changes to blue then red that was implemented. The problem is i ahave an array of 10 elements.initially value 0. when button changes to blue corresponding value changed to 1 for red -0 how can i implemented please help me

post your code here..

i have 10 buttons by default colour is red. for each click its colour changes to blue then red that was implemented. The problem is i ahave an array of 10 elements.initially value 0. when button changes to blue corresponding value changed to 1 for red -0 how can i implemented please help me

try this one. this is done by airshow in this daniweb communication.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Untitled</title>
<style type="text/css">
button { float:left; width:20px; height:20px; 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>
<table>
<tr>
<td>
<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>
</td>
</tr>
</table>
</body>
</html>

Very simple, You can use the value attribute of the button tag. This will change the test on the button also. If this is not something you required, you will have to require another global array to store the values of buttons.

<html>
<head>
<title> Untitled</title>
<style type="text/css">
button { float:left; width:20px; height:20px; 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].value =  (buttons[i].className.indexOf('type1')>=0) ? '1' : '0';
			
			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.value = (hexStr.toLowerCase() == '#c00000' ) ? '1' : '0';
				//alert(this.value);
				this.blur();//kill marquee
			}
		}
	}
}
</script>
</head>

<body>
<table>
<tr>
<td>
<button class="type1" value="0">1</button>
<button class="type2" value="1">2</button>
<button class="type1" value="0">3</button>
<button class="type2" value="1">4</button>
<button class="type1" value="0">5</button>
<button class="type2" value="1">6</button>
<button class="type1" value="0">7</button>
<button class="type2" value="1">8</button>
<button class="type1" value="0">9</button>
<button class="type2" value="1">10</button>
</td>
</tr>
</table>
</body>
</html>
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.