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 。