Question

I’m Not too Fluent in Javascript but I managed to alter this code and make it toggle between the Play button and the Pause Button for a song… it goes like so:

    $(function()
    {
       $("#plbutton").toggle(function()
       { 
            $("#playit").hide();
            $("#pauseit").show();
       },

       function()
       { 

       });
    });

    $(function() 
    {
       $("#pabutton").toggle(function()
       { 
            $("#pauseit").hide();
            $("#playit").show();
       },

       function()
       {

       });
    });

This is the HTML:

    <span id="playit"><a href="javascript:void(0)" onclick="document.getElementById('WeFuckinBall').play()" id="plbutton"><img src="images/playbutton.png" /></a></span>
    <span id="pauseit" ><a href="#" onclick="document.getElementById('WeFuckinBall').pause()" id="pabutton"><img src="images/pausebutton.png" /></a></span>

and this is the css for the pause span:

    #pauseit{
        display: none;}

Now When I Click the Play Button It switches to the Pause Button, then When I Click the Pause Button it Switches to the Play but after that It requires TWO Clicks in order to work… It’ll pause/play the song but the image wont toggle till you click again…

I tried looking around but due to my minimal knowledge of java and jquery I wasn’t able to apply the fixes to my code…

Answer 1

If you use links, add e.preventDefault();

if not this should work

<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit"><img src="images/pausebutton.png" /></span>


$(document).ready(function() {
  $("#playit").on("click", function(e) {
    $("#$WeFuckinBall").play() 
    $(this).hide();
    $("#pauseit").show();
  });
  $("#pauseit").on("click", function(e) { 
    $("#WeFuckinBall").pause() 
    $(this).hide();
    $("#playit").show();
  });
});

You can even leave out the span