时间戳

首页 > 解决方案 > 在 .ejs 文件中使用 .js 文件中的函数

javascript - 在 .ejs 文件中使用 .js 文件中的函数

问题描述

我有一个 .ejs 文件，我试图从中访问 .js 文件中的函数。这两个都包含客户端代码。我的问题是，当我尝试从 .ejs 文件调用函数时，由于 .js 没有被使用，所以找不到该函数。

我在 .ejs 文件的标签中有一个指向 .js 文件的链接。

有人可以帮我解决这个问题，因为我对 Javascript 还是很陌生？

.ejs 文件内容：

...
<button type="button" onclick="overlayOn()">view comment</button>

.js 文件有一个名为 overlayOn() 的函数

function overlayOn() {
    document.getElementById("overlay").style.display = "block";
  }

错误：

Uncaught ReferenceError: overlayOn is not defined
    at HTMLButtonElement.onclick

标签： javascriptejsclient-side

解决方案

您可能必须将所有事件函数包装在文档加载函数中。来自https://developer.mozilla.org/enUS/docs/Web/API/Window/DOMContentLoaded_event：

window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});

如果 DOM 在您的脚本文件运行后加载，那么它们的目标是尚未加载的内容。作为一项额外的预防措施，将脚本标签放在正文元素的底部，以便在页面的其余部分加载后运行。希望这有效！

推荐阅读