调用外部 js 函数作为 ejs onclick 事件

Question

我有一个 nodejs 应用程序，它呈现一个名为 main.ejs 的 ejs 文件，其中包括一个按钮。 我想在一个外部 javascript 文件中声明一个函数，我可以在该按钮的 onclick 事件中调用它（在 main.ejs 中）。 但是每次我运行应用程序时，通过渲染页面，该函数会被自动调用，但是当我点击按钮时它不会被调用！

（我需要提一下，我已经尝试过直接在 main.ejs 中的脚本标签中编写此函数，并且效果很好。但我坚持将其移动到相应的 js 文件中）

functions.js（外部 js 文件）

function optionClick() {
    console.log("Yoohooo!!");
}

module.exports = {
    optionClickFunc: optionClick
};

server.js

var functions = require('./public/functions');

app.get('/question', (req, res) => {
 res.render('main.ejs', {
                data: {
                   function: functions.optionClickFunc
                }
            });
});

ma​​in.ejs

<button id="submit-button" onclick="'<%= data.function() %>';"> START </button>

每当我在浏览器中有这个 url：http://localhost:3000/question 时，我会在控制台中看到打印的日志消息（“Yoohooo!!”），而无需单击按钮！ 当我单击按钮时它不打印消息！

有什么想法吗？非常感谢您的宝贵时间。

Answer 1

data.function 是一个函数，当您在服务器端代码中调用它时，您会在服务器端代码中调用它。

编写HTML时需要编写字符串，表示onclick属性值的字符串需要是JavaScript源代码。 （如前所述，data.function 是一个函数，而不是源代码字符串。）客户端将编译该源代码并执行它。

---

您的服务器端和客户端代码可能都是用 JavaScript 编写的，但它们是两个不同的程序，在两个不同的环境（Node.js 和浏览器）中运行，通常（在开发过程中较少）运行在两个不同的环境中不同的电脑。

相关：What is the difference between client-side and server-side programming?