Javascript output not showing inside of a HTML p tag

Question

I have a Javascript function which are doing the following functions,

• Hide a div content when a button click.
• Getting a input time (h:m:s) from a html input field and countdown them.
• Showing the counting result in a html p tag.

function countdownTimeStart() {

  /* hide the timer panel div when start button click*/
    document.getElementById('timer_panel',). 
    innerHTML=document.getElementById('time_count').innerHTML; 

  /* Start count the time in timer panel */

  /* Start count the time in timer panel */
  var time = document.getElementById("picker-dates").value;
  time = time.split(':');
  var date = new Date();
  var countDownDate = date.setHours(time[0], time[1], time[2]);

  var x = setInterval(function() {

    // set hours, minutes and seconds, decrease seconds
    var hours = time[0];
    var minutes = time[1];
    var seconds = time[2]--;

    // if seconds are negative, set them to 59 and reduce minutes
    if (time[2] == -1) {
      time[1]--;
      time[2] = 59
    }

    // if minutes are negative, set them to 59 and reduce hours
    if (time[1] == -1) {
      time[0]--;
      time[1] = 59
    }

    // Output the result in an element with id="demo"
    // add leading zero for seconds if seconds lower than 10
    if (seconds < 10) {
      document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
    } else {
      document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + seconds + " ";
    }

    // If the count down is over, write some text
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "00:00:00";
    }
  }, 1000);
}

<div id="timer_panel" class="timer_panel1>
          <input type = " text " id = "picker-dates ">
          <button id="start " onclick="countdownTimeStart(); ">
        </div>
        
        <div id="time_count " class="time_count " style="visibility:hidden;>
          <p id="demo" class="count"></p>
        </div>

Problem is the time counting result not showing inside of the "demo" p tag when hiding timer panel div. How can I solve this, can anyone help me !

Answer 1

I've noticed a few mistakes in your code, I'll try to outline them as clearly as I can for you.

HTML

Firstly in your HTML you haven't closed your input tags. Also there was a typo on your div with the id time_count that didn't have closed quotations.

As some other people have mentioned, you also had a typo in your id name.

But the biggest thing, is that your p tag is wrapped in the div that inline you have set to visibility:hidden. Your JS doesn't address this. Once I moved the p tag out from this div, I was able to see an output.

However...

JavaScript

The Javascript code has some minor adjustments too. Why do you create a date object that you don't use? I'd delete this is you don't need it.

I would also suggest you store your element for use later, rather than calling document.getElementById('demo') everytime you use it, like so:

var el = document.getElementById('demo');

How to stop once the timer reaches 0

I've added this logic to your if else block

   if( seconds == 0 && minutes == 0 && hours == 0 ){
      clearInterval(x);
      el.innerHTML = "00:00:00";
   }

It uses code that you were trying to implement earlier but wasn't quite right. Moving it to here should do the trick. Check out the codepen where I have updated the code also.

Cancel the timer

Firstly you'll need to add a new button to your HTML

   <button id="cancel">Cancel</button>

Then within your setInterval function I've added the following code:

// select cancel button
var cancel = document.getElementById('cancel');
 // set up cancel functionality 
 // create a function to handle the cancel
function cancelCountdown(){
  el.innerHTML = "00:00:00";
  clearInterval(x);
  }
  // attach listener to cancel
  // if cancel button is clicked
  cancel.addEventListener( 'click', cancelCountdown);

Pause the timer

Okay, so we need to add another button to your HTML with a id of pause like so:

   <button id="pause" >pause</button>

Then we add this pause functionality just below the code we put in to clear the timer.

 // select the pause button
   var pause = document.getElementById('pause');

// create pause function
  function pauseCountdown(){
    // grab the current time
    let pauseTime = hours+":"+minutes+":"+seconds;
    // set that time into the timeInput
    // so that next time 'Start' is pressed
    // the paused time will be used
    let timeInput = document.getElementById('picker-dates');
    timeInput.value = pauseTime;
    // stop the time to 'pause'
    clearInterval(x);
  }
  // add listener to catch the pause
  pause.addEventListener('click' , pauseCountdown);

How does it work? Well we're kinda cheating. You can't pause an Interval timer (that I've been able to find anyway) but you can take the values you're using for the time and store them. Then when the start button is pressed, the timer will start again with the paused interval time as the countdown time. I hope that makes sense. Check out the codepen to see the example working.

Hope this helps!

Cheers,

Answer 2

Your p element has id demo1, but your code uses demo.