How to create 2 buttons Play , pause in js-CodePudding

I have 2 buttons in the card, like the below.

<div class = "card">
   <button class ="play"> Play </button>
   <button class ="pause"> PAuse </button>
</div>

When I press PLay button, Pause should be enabled. Play button should be disabled.

After Pressing Play,If I press Pause button, Play button should be Enabled and Pause button should be disabled.

The one thing, We cannot directly press the Pause button, without pressing the Play button.

How could I write a code to show the conditions Play and Pause in JS.

Could anyone please help?

Thanks

CodePudding user response：

Well, here is the vanilla Javascript version.

Html:

<div class = "card">
   <button class ="play"> Play </button>
   <button class ="pause"> Pause </button>
</div>

Javascript:

const playButton = document.querySelector('.play');
const pauseButton = document.querySelector('.pause');

// By default make pause button disabled
pauseButton.disabled = true;


playButton.addEventListener('click', () => {
  pauseButton.disabled = false;
  playButton.disabled = true;
});


pauseButton.addEventListener('click', () => {
  playButton.disabled = false;
  pauseButton.disabled = true;
});

This will work.

Here is the codepen

CodePudding user response：

Set by default disabled="true" for .pause button and continue with set click event for two buttons

$(".play").on("click", function(){
  $(this).prop("disabled", true );
  $(".pause").prop("disabled", false );
})

$(".pause").on("click", function(){
  $(this).prop("disabled", true );
  $(".play").prop("disabled", false );
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "card">
   <button class ="play"> Play </button>
   <button class ="pause" disabled="true"> PAuse </button>
</div>

If you don't have controll on your DOM and can't add disabled="true" for .pause, you can use $(".pause").prop("disabled", true ) before define events

$(".pause").prop("disabled", true );

$(".play").on("click", function(){
  $(this).prop("disabled", true );
  $(".pause").prop("disabled", false );
})

$(".pause").on("click", function(){
  $(this).prop("disabled", true );
  $(".play").prop("disabled", false );
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "card">
   <button class ="play"> Play </button>
   <button class ="pause"> PAuse </button>
</div>

CodePudding user response：

Consider the following.

$(function() {
  $(".btn").click(function(e) {
    if ($(this).hasClass("play")) {
      $(this).toggleClass("play pause").html("&#9208; Pause");
      // Trigger Play event
    } else {
      $(this).toggleClass("play pause").html("&#9205; Play");
      // Trigger Pause Event
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <button class="btn play">&#9205; Play</button>
</div>

This retains the one button yet changes the Class and Content of the button as needed.

Symbol Reference: http://www.scrollseek.com/wd/html_symbols_complete.html