CODEWITHSUNDEEP
javascripthtml
Ewald Bos
Ewald Bos

Reputation: 1770

3 state toggle button

I am having some trouble with a button toggle, i came this far by now studying on it for 10 hours, starng at my screen. I made a toggle with 3 buttons to play and pause audio and play again. But the thing is (the audio works good by the way). That when started the button 'off' and 'pause' are displayed directly. When one of the two gets clicked the audio 'on' button appears. When clicked the two buttons come again back, here it the full script (except the audio play part but that works already) thanks for all your help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>

<script>
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
</script>

</head>

<body>

<img id="off" src="images/general/sound-off.png" width="40" height="32" onClick="javascript:hideShow('on'); javascript:hideShow('off'); javascript:showHide('pause'); javascript:playAudio()" alt="on">

<img id="on" src="images/general/sound-on.png" width="40" height="32" onClick="javascript:showHide('off'); javascript:showHide('pause'); javascript:hideShow('on'); javascript:pauseAudio()" style="display:none;" alt="off">

<img id="pause" src="images/general/sound-pause.png" width="40" height="32" onClick="javascript:hideShow('on'); javascript:hideShow('pause'); javascript:hideShow('off'); javascript:playAudio()" alt="on">


</body>
</html>

This so far works but the strange thing is that is show the two images at once.

Upvotes: 0

Views: 5192

Answers (3)

crisc2000
crisc2000

Reputation: 1222

You can try something like this:

<button id="b_music" onclick="_js_ToggleAudio();">
Music
</button>

<script>
var toggle1 = 0; //define global variable outside the function where to store the toggle state
function _js_ToggleAudio() {
    if (toggle1 === 0) {
        document.querySelector('#b_music').style.color = 'orange'; //play music
        toggle1 = 1;
    }
    else if (toggle1 === 1) {
        document.querySelector('#b_music').style.color = 'red'; //pause music
        toggle1 = 2;
    }
    else if (toggle1 === 2) {
        document.querySelector('#b_music').style.color = 'black'; //stop music
        toggle1 = 0;
    }
}
</script>

Demo: https://jsfiddle.net/eliz82/vLy072nq/

Upvotes: 0

Travesty3
Travesty3

Reputation: 14479

First of all, it looks to me like your two functions are doing the same thing. They're toggling the display property of the images. In both cases, if display is set to '', it gets set to 'none'. If display is set to 'none', it gets set to ''.

Secondly, I think the problem is that you're toggling them. If you only want to show one at a time, you need to set one to shown and the other two to hidden. If you just toggle them every time, then the two that are hidden will always change to shown at the same time.

I think it should look more like this: (sample)

<script type="text/javascript">
function hide(elementID)
{
    document.getElementById(elementID).style.display = 'none';
}

function show(elementID)
{
    document.getElementById(elementID).style.display = '';
}
</script>

<img id="off" src="images/general/sound-off.png" width="40" height="32" onClick="show('on'); hide('off'); playAudio();" alt="on">
<img id="on" src="images/general/sound-on.png" width="40" height="32" onClick="show('pause'); hide('on'); pauseAudio();" style="display:none;" alt="off">
<img id="pause" src="images/general/sound-pause.png" width="40" height="32" onClick="show('on'); hide('pause'); playAudio();" style="display:none;" alt="on">

Upvotes: 1

Andrew
Andrew

Reputation: 12809

You could use jQuery toggle, with more than one event. see http://api.jquery.com/toggle-event/

$("#button").toggle(
  function() {
    $(this).css("background-image","url(one.png)");
  },   
  function() {
    $(this).css("background-image","url(two.png)");
  },   
  function() {
    $(this).css("background-image","url(three.png)");
  }
});

It would be trivial to modify this to change the src attribute instead

$(this).attr('src', ...);

Upvotes: 1

Related Questions