通过 ejs 模板执行函数 onclick

Question

我正在使用 node.js 制作 Web 应用程序。我通过 Express 处理服务器端并使用 ejs 模板来提供网页。我的问题是我的 index.js 文件中有一个函数，它在按钮的 onclick 事件的 ejs 文件中被引用。目前，我只在控制台中记录一条语句以确保其正常工作。现在，每次我重新启动服务器并打开我的主路由时，我都会看到消息记录到控制台中，但是当我单击实际按钮时，什么也没有发生。该功能在服务器 start/restart 上执行，但在单击按钮时不执行。我已经尝试使用正确的 ejs 语法和标记将函数完全写在 ejs 页面内。每次出现同样的问题；该函数在主页刷新时执行，并在控制台中记录消息，但单击按钮时没有任何反应。

我猜是因为我在 res.render 路由中调用函数，它会在页面呈现后执行。我该如何进行更改，以便在单击按钮后执行函数？

这是按钮的功能（在 index.js 内）：

function clicker() {
  console.log("Button Working!");
};

这是处理此函数路由的index.js代码：

app.get("/", (req, res) => {
  res.render("home", {
    x: clicker()
  });
});

我的按钮标签 home.ejs:

<button class = 'btn btn-primary' onclick = "<%=x%>">Click Me!</button>

控制台视图：

Answer 1

您正在调用函数本身而不是传递它：

app.get("/", (req, res) => {
  res.render("home", {
    x: clicker() // -> THIS GET EXECUTED
  });
});

我应该这样写

app.get("/", (req, res) => {
  res.render("home", {
    x: clicker // -> THIS PASS AS OBJECT/FUNCTION
  });
});

现在当您点击按钮时应该会执行。

但是：我不确定您是否在服务器端定义了“clicker”，它会传递给客户端。 “clicker”功能必须在客户端可用，而不是服务器端。移动客户端的定义，只引用函数名：

{
  x: "clicker"
}

通过 ejs 模板执行函数 onclick

Executing a function onclick via ejs template

html

javascript

ejs

node.js

express