Home/ Questions/Q 8619737
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T06:24:44+00:00

I am having some trouble with a button toggle, i came this far by

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">
    • 0