EJS 逻辑有效，但没有显示 html答案

【问题标题】：EJS logic works, but html isn't showingEJS 逻辑有效，但没有显示 html
【发布时间】：2018-01-15 23:32:54
【问题描述】：

我正在使用 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> 但他们不在条件内工作。

【问题讨论】：

如果发生这种情况也不会感到惊讶，因为 express 讨厌将 HTML 与计时器交错的概念。可能想使用 DOM 调用来更新倒计时 div 的内容，而不是尝试发出 HTML
我会检查的。引起我注意的是日志正在运行但 html 出现重影。
您的日志是由 express 在页面呈现时发出的有效 JavaScript，这些 JavaScript 将在未来某个时间执行 - 没有问题。 p 标签理论上会在未来的某个阶段发出……可能根本没有上下文。难怪他们没有被展示

标签： javascript node.js express ejs

【解决方案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);

【讨论】：