CountDown Timer: pause button won't pause or change back into play button

Question

I'm having trouble trying to pause my countdown timer. I'm trying to make it so after I click the play button, the button changed into a pause button. But for some reason it won't pause.

I tried to change the id"pButton" to "pauseButton", which is working, but it seems my pause onclick function won't change back to pButton, any help?(the clearinterval(timecounter), timercounter is a global varaible so it can access that.) Also here is the full code on code pen if you need to see that:http://codepen.io/freefora11/pen/eJdVjZ

//when play button is pressed
    if(document.getElementById("pButton")){
        document.getElementById("pButton").onclick=function(){

            //change the id of the button
            if(document.getElementById("pButton")){
                document.getElementById("pButton").id = "pauseButton";
            }

            //variables
            strMin = document.getElementById("test").innerHTML;
            var res = strMin.split(":",2);
            min = parseInt(res[0]);
            min= min * 60;
            var sec = parseInt(res[1]);
            timeInSeconds = min + sec;



            //set interval to start keeping track each second that has passed
            timeCounter = setInterval(function() {
              timeInSeconds--;

              // If we hit 0 seconds clear the timer
              if (timeInSeconds <= 0) {
                clearInterval(timeCounter);
              }

              // Display the current time
              displayTime();
            }, 1000);
        }
    }

    //when the pause button is clicked
    if(document.getElementById("pauseButton")){
        document.getElementById("pauseButton").onclick=function(){

            //stop the interval
            clearInterval(timeCounter);

            //change the id of the play button from pauseButton to pButton again
            if(document.getElementById("pauseButton")){
                document.getElementById("pauseButton").id ="pButton";
            }

        }
    }

Answer 1

Changing the Id will still leave remnants of the handlers around in the DOM. So when you run your codepen and click the Start/Pause button, you'll notice it's adding another countdown to the timer. This is why the countdown speeds up each time you click the button.

You should handle the state of the click event in one handler for the button. If the state is paused, then handle your pause logic. If it's running, then handle your running logic. But do it all from one event handler. Using id or class is fine in this case, but don't swap it out on the fly. If anything, using an Id for the click handler, and then swapping a class on the element in the dom (or applying a data attribute) would better express the current state/mode of the clock.

Still though, handle the logic in your javascript. Use the dom state for applying styles if you choose to do so (selecting in your CSS for example).