EJS邏輯有效，但html未顯示

Question

我正在使用Express.js和EJS開發計時器。 我正在嘗試動態更新html，但沒有顯示任何內容。 但是我在CLI中獲得console.log。

 <div id="countdown"> <% setInterval(function(){ %> <% var now = new Date().getTime(); %> <% var distance = expiration - now; %> <% var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); %> <% var seconds = Math.floor((distance % (1000 * 60)) / 1000); %> <% if (distance > 0 ) { %> <% console.log(minutes + ':' + seconds) %> <p>This isn't showing</p> <% } else { %> <% console.log('expired') %> <p>This isn't showing</p> <% }; %> <% }, 1000); %> </div> 

CLI我缺少明顯的東西嗎？

我還有其他動態標簽，如<h2>Send <%= displayAmount %> to:</h2>但它們在條件中不起作用。

Answer 1

問題在於，正如您對其進行編程一樣，JavaScript可以繼續運行，但是頁面無法重新渲染，因為只告訴它渲染一次。

您將不得不編寫另一個JavaScript函數，該函數將在每次迭代時重新呈現DOM。

就像是：

let myDiv = document.getElementById('countdown');

// Delete previously added elements
while (myDiv.firstChild) {
  myDiv.removeChild(myDiv.firstChild);
}

// Create a <p>
let p = document.createElement('p');

// Create your text
let text = document.createTextNode(`${minutes}:${seconds}`);
// OR:
let text = document.createTextNode('Expired');

// Append the text to <p>
p.appendChild(text);

// Append the <p> to div
myDiv.appendChild(p);