Javascript输出未显示在HTML p标签内

Question

我有一个执行以下功能的Javascript函数，

• 单击按钮时隐藏div内容。
• 从html输入字段获取输入时间（h：m：s）并将其倒计时。
• 在html p标签中显示计数结果。

 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> 

问题是隐藏计时器面板div时，计时结果未显示在“ demo” p标签内。 我该如何解决，任何人都可以帮助我！

Answer 1

我注意到您的代码中有一些错误，我将尽力为您概述清楚。

HTML

首先，在您的HTML中，您尚未关闭输入标签。 另外，您的div上有一个错别字，其ID为time_count ，没有封闭的引号。

正如其他人提到的那样，您的ID名称中也有一个错字。

但最大的事情是，您的p标签包裹在您已设置为visibility:hidden内联的div中。 您的JS无法解决此问题。 将p标签从该div中移出后，便可以看到输出。

然而...

JavaScript的

Javascript代码也有一些小的调整。 为什么要创建不使用的日期对象？ 我会删除它，因为您不需要它。

我还建议您存储元素以备后用，而不是每次使用时都调用document.getElementById('demo') ，例如：

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

计时器到0后如何停止

我已将此逻辑添加到您的if else块中

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

它使用您先前尝试实现的代码，但不太正确。 将其移到此处应该可以解决问题。 在我也更新了代码的地方检查出Codepen 。

取消计时器

首先，您需要在HTML中添加一个新按钮

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

然后在您的setInterval函数中，添加了以下代码：

// 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);

暂停计时器

好的，因此我们需要向您的HTML添加另一个按钮，其ID为pause，如下所示：

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

然后，我们在清除计时器的代码下方添加此暂停功能。

 // 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);

它是如何工作的？ 好吧，我们有点作弊。 您不能暂停一个Interval计时器（无论如何我都可以找到它），但是您可以将您正在使用的值用于时间并存储它们。 然后，当按下开始按钮时，计时器将以暂停的间隔时间作为倒数时间再次启动。 我希望这是有道理的。 签出代码笔以查看示例工作。

希望这可以帮助！

干杯，

Answer 2

您的p元素具有id demo1 ，但是您的代码使用demo 。