[英]EJS logic works, but html isn't showing
I'm working on a timer using Express.js and EJS. 我正在使用Express.js和EJS开发计时器。 I'm trying to update the html dynamically but i don't get anything displayed.
我正在尝试动态更新html,但没有显示任何内容。 But i get the console.log in my cli.
但是我在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 Am i missing something obvious? CLI我缺少明显的东西吗?
I have other dynamic tags as <h2>Send <%= displayAmount %> to:</h2>
but they aren't working inside the conditional. 我还有其他动态标签,如
<h2>Send <%= displayAmount %> to:</h2>
但它们在条件中不起作用。
The problem is that the JavaScript keeps running, as you have programmed it to do, but the page is not re-rendering, because it is only told to render once. 问题在于,正如您对其进行编程一样,JavaScript可以继续运行,但是页面无法重新渲染,因为只告诉它渲染一次。
You would have to write another JavaScript function that will re-render the DOM every iteration. 您将不得不编写另一个JavaScript函数,该函数将在每次迭代时重新呈现DOM。
Something like: 就像是:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.