Javascript Show/Hide Play/Pause Buttons
Question
I have a Play and Pause button and I want the Play to turn into a Pause button when I click on it. I have my Play and Pause buttons ready in my CSS and my javascript in the head of my html.
However, when I click on the Play button, the Pause one won't display.
<script> $('#play').on('click', function(event) { currentPlayingTrack.play(); $('#pause').show(); $('#play').hide(); }); $('#pause').on('click', function(event) { currentPlayingTrack.pause(); $('#pause').hide(); $('#play').show(); }); </script>
#play, #pause { width:80px; height: 80px; background: transparent; position: relative; margin-top: 10px; display: block; } #play { width: 0; height: 0; border-left: 30px solid white; border-right: 30px solid transparent; border-top: 30px solid transparent; border-bottom: 30px solid transparent; position: absolute; content: ""; top: 10px; left: 25px; } #pause:before { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; left: 25px; } #pause:after { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; right: 25px; }
<div> <a href="#" id="play"></a> <a href="#" id="pause" style="display: none;"></a> </div>
What am I doing wrong ?
3 answers
solution1
1 ACCPTED 2017-02-17 05:35:18
You say that your javascript is in the head of your html, but that means that it will be loaded and run before your buttons are added to the DOM, ie, they will not be available to add a listener to. Here's a fiddle with the script after your buttons and it runs fine. For example:
<div>
<a href="#" id="play"></a>
<a href="#" id="pause" style="display: none;"></a>
</div>
<script>
$('#play').on('click', function(event) {
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
</script>
If you move the script before the buttons then the click listeners fire too early. Scripts are run immediately upon loading.
solution2
0 2017-02-17 05:38:50
$( document ).ready(function() { $('#play').show(); }); $('#play').on('click', function(event) { //currentPlayingTrack.play(); $('#pause').show(); $('#play').hide(); }); $('#pause').on('click', function(event) { //currentPlayingTrack.pause(); $('#pause').hide(); $('#play').show(); });
#play, #pause { width:80px; height: 80px; background: transparent; position: relative; margin-top: 10px; display: block; } #play { width: 0; height: 0; border-left: 30px solid white; border-right: 30px solid transparent; border-top: 30px solid transparent; border-bottom: 30px solid transparent; position: absolute; content: ""; top: 10px; left: 25px; } #pause:before { width: 10px; height: 60px; position: absolute; content: ""; top: 10px; left: 25px; } #pause:after { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; right: 25px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <a href="#" id="play">Play</a> <a href="#" id="pause" style="display: none;">Pause</a> </div>
solution3
0 2017-02-17 05:41:31
Try this one. I have commented the currentPlayingTrack.play(); for testing.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#play').on('click', function (event) { //currentPlayingTrack.play(); $('#pause').show(); $('#play').hide(); }); $('#pause').on('click', function (event) { //currentPlayingTrack.pause(); $('#pause').hide(); $('#play').show(); }); }) </script> <style> #play, #pause { width: 80px; height: 80px; background: transparent; position: relative; margin-top: 10px; display: block; } #play { width: 0; height: 0; border-left: 30px solid white; border-right: 30px solid transparent; border-top: 30px solid transparent; border-bottom: 30px solid transparent; position: absolute; content: ""; top: 10px; left: 25px; } #pause:before { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; left: 25px; } #pause:after { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; right: 25px; } </style> </head> <body> <div> <a href="#" id="play">Play</a> <a href="#" id="pause" style="display: none;">Pause</a> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.