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
proprasee
0
Newbie Poster
Recommended Answers
Jump to Posti 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 …
All 4 Replies
venkat0904
1
Junior Poster
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...
network18
15
Practically a Master Poster
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..
muralibobby2015
17
Posting Pro
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>
dasatti
0
Junior Poster in Training
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.