如何在EJS文件中用<%...%>定义调用函数？我的代码为何报错？

Hey，我来帮你拆解这个问题～

首先得搞明白一个核心区别：EJS里的<%...%>标签是在服务器端执行的代码块，而你按钮的onclick事件是在客户端浏览器里执行的JavaScript。这俩运行环境完全不一样，这就是你报错的根源！

你的代码问题出在哪？ #

你在<% %>里定义的nextQuess函数，是在服务器渲染页面的时候运行的，渲染完成后这个函数就留在服务器端了，浏览器拿到的最终HTML里根本没有这个函数的定义。所以当你点击按钮触发onclick时，浏览器在自己的全局作用域里找不到nextQuess，自然就抛出ReferenceError了。

正确的做法分两种情况 #

情况1：函数只需要在客户端执行（不需要服务器数据） #

直接把函数定义放在客户端的<script>标签里就行，不用套EJS的<%...%>：

<div>
  <ol>
    <% var setVar=0; var rowNo=0; %>
    <!-- 服务器端变量定义正常保留 -->
  </ol>
</div>
<div>
  <button onClick="nextQuess()" id="next">Click me!</button>
</div>

<!-- 客户端script标签里定义函数 -->
<script>
function nextQuess() {
  console.log("inside nextQuess function");
}
</script>

情况2：函数需要用到服务器端的数据 #

如果你的函数需要使用EJS里的服务器变量，可以用EJS把变量注入到客户端函数中，比如：

<div>
  <ol>
    <% var serverData = "来自服务器的内容"; %>
  </ol>
</div>
<div>
  <button onClick="nextQuess()" id="next">Click me!</button>
</div>

<script>
function nextQuess() {
  // 用EJS的输出标签把服务器变量注入到客户端JS里
  console.log("<%= serverData %>");
}
</script>

再强调下EJS标签的作用 #

<%...%>是用来让服务器执行代码、生成最终HTML的工具，浏览器看不到这些标签里的代码，只能看到渲染后的结果。所以客户端的交互逻辑，一定要放在客户端的<script>里，或者用其他前端绑定方式（比如addEventListener），别和服务器端的EJS代码混在一起～

内容的提问来源于stack exchange，提问作者alfheimrShiven