How to get buttons to work?

[akamerc]

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.

[lyodmichael]

hmm, your i think your id is wrong?

function controls(className) {
    if (className == "red") {
        document.getElementById('Skip').setAttribute('class','green');
        // You can define your enable statements here
    } else {
        document.getElementById('Skip').setAttribute('class','red');
        // You can define your disables statements here        
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('Text').setAttribute('class','green');
        /// You can define your enable statements here
    } else {
        document.getElementById('Text').setAttribute('class','red');
        //// You can define your disables statements here       
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('GameCenter').setAttribute('class','green');
        // You can define your enable statements here
    } else {
        document.getElementById('GameCenter').setAttribute('class','red');
        // You can define your disables statements here        
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('Message').setAttribute('class','green');
        /// You can define your enable statements here
    } else {
        document.getElementById('Message').setAttribute('class','red');
        //// You can define your disables statements here       
    }
  }function controls(className) {
    if (className == "red") {
        document.getElementById('Write').setAttribute('class','green');
        // You can define your enable statements here
    } else {
        document.getElementById('Write').setAttribute('class','red');
        // You can define your disables statements here        
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('Etras').setAttribute('class','green');
        /// You can define your enable statements here
    } else {
        document.getElementById('Etras').setAttribute('class','red');
        //// You can define your disables statements here       
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('Snyc').setAttribute('class','green');
        // You can define your enable statements here
    } else {
        document.getElementById('Snyc').setAttribute('class','red');
        // You can define your disables statements here        
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('Restart').setAttribute('class','green');
        /// You can define your enable statements here
    } else {
        document.getElementById('Restart').setAttribute('class','red');
        //// You can define your disables statements here       
    }
}

this code, your getelementbyid is wrong.
the id that register is skip and text :).

Skip &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"></button>

Text &nbsp; <button id="Text" class="red" onclick="controls(this.getAttribute('class'))"></button>

Game Center &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"></button>

Message &nbsp; <button id="Text" class="red" onclick="controls(this.getAttribute('class'))"></button>

Write &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"></button>

Etras &nbsp; <button id="Text" class="red" onclick="controls(this.getAttribute('class'))"></button>

Snyc &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"></button>

Restart &nbsp; <button id="Text" class="red" onclick="controls(this.getAttribute('class'))"></button>

[akamerc]

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.

[Rabbit]

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.

[Murat Bastas]

@akamerc your fixes does not works... When i click any button, changing color restart button.

js code :

function controls(id,className) {
    if (className == "red") {
        document.getElementById(id).classList.remove('red');
        document.getElementById(id).classList.add('green');
    } else {
        document.getElementById(id).classList.remove('green');
        document.getElementById(id).classList.add('red');
    }
}​

css code:

.red { 
    background: red; 
    height: 20px;
    width: 20px;
    border-radius: 50px;
    border: 1px solid #000;
}
.green { 
    background: green;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    border: 1px solid #000;
}

html code:

<button id="Text" class="red" onmouseover="controls(this,'red');"></button>
<button id="Text2" class="green" onmouseover="controls(this,'green');"></button>
<button id="Text3" class="red" onmouseover="controls(this,'red');"></button>
<button id="Text4" class="green" onmouseover="controls(this,'green');"></button>​