CODEWITHSUNDEEP
javascript
akamerc
akamerc

Reputation: 29

enable disable image button

Here is what I'm trying to do and yes I have looked around this site for answers but I'm still lost. What I need help on is I'm making a game menu for and android and IOS (IPAD, IPHONE, ITOUCH) device. The menu will have an image of text on it or just plain text. The RED button is disable and the GREEN button is enable for example if the RED is showing you can hear the music play in the background and if you click it and shows GREEN the music will no longer play through the game. Same for the Skip Features too which will enable/disable the features. Looking to do this in javascript. Any advice will be helpful and thanks.

Since I can't post an image due to website rules. I'll write it in as its on the menu. Images = (RED) (GREEN)

Music (RED) (GREEN)

Skip (RED) (GREEN)

Upvotes: 0

Views: 10120

Answers (1)

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

See this DEMO:

http://jsfiddle.net/rathoreahsan/xQ3PT/

Javascript Code

function controls(id) {
    if (id == "play") {
        document.getElementById('play').setAttribute('disabled','disabled');
        document.getElementById('stop').removeAttribute('disabled','disabled');

        // You can define your play music statements here

    } else {
        document.getElementById('stop').setAttribute('disabled','disabled');
        document.getElementById('play').removeAttribute('disabled','disabled');

        // You can define your stop music statements here        
    }
}

HTML Code

    Music&nbsp;<button id="stop" onclick="controls(this.id)" disabled="disabled">Stop</button>&nbsp;<button id="play" onclick="controls(this.id)">Play</button>

CSS 

#stop{
    background-color: red;
    border: 0px;
}

#play{
    background-color: green;
    border: 0px;
}

EDITED:

Another Solution with a single Button:

DEMO: http://jsfiddle.net/rathoreahsan/xQ3PT/2/

Javascript Code

function controls(className) {
    if (className == "red") {
        document.getElementById('PlayStop').setAttribute('class','green');
        document.getElementById('PlayStop').innerHTML = "Stop";
        // You can define your play music statements here
    } else {
        document.getElementById('PlayStop').setAttribute('class','red');
        document.getElementById('PlayStop').innerHTML = "Play";
        // You can define your stop music statements here        
    }
}

HTML Code

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

Upvotes: 2

Related Questions