javascript - enable disable image button - Stack Overflow

admin管理员组

文章数量:1024582

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)

---

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)

---

• javascript

Share Improve this question Follow edited Jul 9, 2012 at 6:24 Filburt 18.1k1313 gold badges9191 silver badges150150 bronze badges asked Jul 9, 2012 at 6:07 akamercakamerc 2911 gold badge22 silver badges55 bronze badges 2

• 1 You should provide some code to show what you have so far. Don't expect the munity to do all the work for you. – user123444555621 Commented Jul 9, 2012 at 6:15
• Sorry if I made it seem if I need someone to do it which all I need is help. – akamerc Commented Jul 9, 2012 at 6:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

See this DEMO:

http://jsfiddle/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/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>

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)

---

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)

---

• javascript

Share Improve this question Follow edited Jul 9, 2012 at 6:24 Filburt 18.1k1313 gold badges9191 silver badges150150 bronze badges asked Jul 9, 2012 at 6:07 akamercakamerc 2911 gold badge22 silver badges55 bronze badges 2

• 1 You should provide some code to show what you have so far. Don't expect the munity to do all the work for you. – user123444555621 Commented Jul 9, 2012 at 6:15
• Sorry if I made it seem if I need someone to do it which all I need is help. – akamerc Commented Jul 9, 2012 at 6:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

See this DEMO:

http://jsfiddle/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/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>

本文标签： javascriptenable disable image buttonStack Overflow