Tengo un botón Reproducir y Pausa y quiero que Reproducir se convierta en un botón Pausa cuando hago clic en él. Tengo mis botones Reproducir y Pausa listos en mi CSS y mi javascript en la cabeza de mi html.

Sin embargo, cuando hago clic en el botón Reproducir, no aparece la Pausa.


<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>

¿Qué estoy haciendo mal?

0
mattvent 17 feb. 2017 a las 08:17

3 respuestas

La mejor respuesta

Usted dice que su javascript está en la cabeza de su html, pero eso significa que se cargará y ejecutará antes de que sus botones se agreguen al DOM, es decir, no estarán disponibles para agregar un oyente. Aquí hay un violín con el script después de los botones y funciona bien. Por ejemplo:

<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>

Si mueve la secuencia de comandos antes que los botones, los oyentes de clics se disparan demasiado pronto. Las secuencias de comandos se ejecutan inmediatamente después de la carga.

1
j3py 17 feb. 2017 a las 05:35
$( 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>
0
Sarika Koli 17 feb. 2017 a las 05:44

Prueba este. He comentado el currentPlayingTrack.play(); para probar.

<!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>
0
Nitheesh 18 feb. 2017 a las 13:43