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 .
proprasee 0 Newbie Poster
Airshow 416 WiFi Lounge Lizard Team Colleague
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
Airshow 416 WiFi Lounge Lizard Team Colleague
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
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.