0

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

Edited by proprasee: n/a

5
Contributors
4
Replies
5
Views
7 Years
Discussion Span
Last Post by dasatti
0

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...

0

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..

0

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>

Edited by muralikalpana: n/a

0

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>
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.