By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,398 Members | 1,362 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,398 IT Pros & Developers. It's quick & easy.

How to get buttons to work?

P: 2
Demo http://jsfiddle.net/xQ3PT/51/
I have 8 buttons that start off red and when you click them turns green. Each button is an enable/disable button red(Disable) Green(Enable). Been trying to get them to work right but when you click the first one the second one turns green, but the second one works fine. How can I get them to work right.
Jul 23 '12 #1
Share this Question
Share on Google+
4 Replies


P: 75
hmm, your i think your id is wrong?

Expand|Select|Wrap|Line Numbers
  1. function controls(className) {
  2.     if (className == "red") {
  3.         document.getElementById('Skip').setAttribute('class','green');
  4.         // You can define your enable statements here
  5.     } else {
  6.         document.getElementById('Skip').setAttribute('class','red');
  7.         // You can define your disables statements here        
  8.     }
  9. }
  10.   function controls(className) {
  11.     if (className == "red") {
  12.         document.getElementById('Text').setAttribute('class','green');
  13.         /// You can define your enable statements here
  14.     } else {
  15.         document.getElementById('Text').setAttribute('class','red');
  16.         //// You can define your disables statements here       
  17.     }
  18. }
  19.   function controls(className) {
  20.     if (className == "red") {
  21.         document.getElementById('GameCenter').setAttribute('class','green');
  22.         // You can define your enable statements here
  23.     } else {
  24.         document.getElementById('GameCenter').setAttribute('class','red');
  25.         // You can define your disables statements here        
  26.     }
  27. }
  28.   function controls(className) {
  29.     if (className == "red") {
  30.         document.getElementById('Message').setAttribute('class','green');
  31.         /// You can define your enable statements here
  32.     } else {
  33.         document.getElementById('Message').setAttribute('class','red');
  34.         //// You can define your disables statements here       
  35.     }
  36.   }function controls(className) {
  37.     if (className == "red") {
  38.         document.getElementById('Write').setAttribute('class','green');
  39.         // You can define your enable statements here
  40.     } else {
  41.         document.getElementById('Write').setAttribute('class','red');
  42.         // You can define your disables statements here        
  43.     }
  44. }
  45.   function controls(className) {
  46.     if (className == "red") {
  47.         document.getElementById('Etras').setAttribute('class','green');
  48.         /// You can define your enable statements here
  49.     } else {
  50.         document.getElementById('Etras').setAttribute('class','red');
  51.         //// You can define your disables statements here       
  52.     }
  53. }
  54.   function controls(className) {
  55.     if (className == "red") {
  56.         document.getElementById('Snyc').setAttribute('class','green');
  57.         // You can define your enable statements here
  58.     } else {
  59.         document.getElementById('Snyc').setAttribute('class','red');
  60.         // You can define your disables statements here        
  61.     }
  62. }
  63.   function controls(className) {
  64.     if (className == "red") {
  65.         document.getElementById('Restart').setAttribute('class','green');
  66.         /// You can define your enable statements here
  67.     } else {
  68.         document.getElementById('Restart').setAttribute('class','red');
  69.         //// You can define your disables statements here       
  70.     }
  71. }

this code, your getelementbyid is wrong.
the id that register is skip and text :).
Expand|Select|Wrap|Line Numbers
  1. Skip &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"></button>
  2.  
  3. Text &nbsp; <button id="Text" class="red" onclick="controls(this.getAttribute('class'))"></button>
  4.  
  5. Game Center &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"></button>
  6.  
  7. Message &nbsp; <button id="Text" class="red" onclick="controls(this.getAttribute('class'))"></button>
  8.  
  9. Write &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"></button>
  10.  
  11. Etras &nbsp; <button id="Text" class="red" onclick="controls(this.getAttribute('class'))"></button>
  12.  
  13. Snyc &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"></button>
  14.  
  15. Restart &nbsp; <button id="Text" class="red" onclick="controls(this.getAttribute('class'))"></button>
Jul 23 '12 #2

P: 2
http://jsfiddle.net/xQ3PT/55/

I fix the ID's and when you click anyone the last one turns green, but I need all buttons to work like the last one.
Jul 23 '12 #3

Rabbit
Expert Mod 10K+
P: 12,430
This is because you have declared the same function multiple times; There's no way for it to know which one to use. You only need one function. And you just need to pass the element calling the function so it knows which one to use.
Jul 23 '12 #4

Murat Bastas
P: 25
@akamerc your fixes does not works... When i click any button, changing color restart button.

js code :
Expand|Select|Wrap|Line Numbers
  1. function controls(id,className) {
  2.     if (className == "red") {
  3.         document.getElementById(id).classList.remove('red');
  4.         document.getElementById(id).classList.add('green');
  5.     } else {
  6.         document.getElementById(id).classList.remove('green');
  7.         document.getElementById(id).classList.add('red');
  8.     }
  9. }​
  10.  
css code:
Expand|Select|Wrap|Line Numbers
  1. .red { 
  2.     background: red; 
  3.     height: 20px;
  4.     width: 20px;
  5.     border-radius: 50px;
  6.     border: 1px solid #000;
  7. }
  8. .green { 
  9.     background: green;
  10.     height: 20px;
  11.     width: 20px;
  12.     border-radius: 50px;
  13.     border: 1px solid #000;
  14. }
  15.  
html code:
Expand|Select|Wrap|Line Numbers
  1. <button id="Text" class="red" onmouseover="controls(this,'red');"></button>
  2. <button id="Text2" class="green" onmouseover="controls(this,'green');"></button>
  3. <button id="Text3" class="red" onmouseover="controls(this,'red');"></button>
  4. <button id="Text4" class="green" onmouseover="controls(this,'green');"></button>​
  5.  
Jul 25 '12 #5

Post your reply

Sign in to post your reply or Sign up for a free account.