EJS文件前端JavaScript函数内<%...%> scriptlet标签运行异常问题求助

问题根本原因 #

EJS 是服务端渲染模板，所有包裹在 <% %>、<%= %> 里的代码，都会在服务端生成HTML页面的时候就全部执行完成，最终发送到用户浏览器的页面里，是没有任何EJS标签的纯静态HTML/JS代码。你写在前端JS函数里的EJS逻辑，根本不会等用户点击按钮才运行，而是页面还没传到浏览器的时候就已经全部跑完了，这就是你遇到的问题的核心。

修复方案 #

你只需要把服务端的台词数据，一次性注入到前端JS变量里，后续的计数、切换逻辑全部交给前端JS来做就可以，完全不需要在前端函数里穿插EJS标签。

步骤1：把台词数据注入到前端全局变量 #

在你的EJS文件的<script>标签最开头，先把整个脚本数据和初始值通过EJS注入给前端：

// 服务端注入完整台词数据到前端变量，用<%-避免转义JSON字符
const allScriptLines = <%- JSON.stringify(scripts[scriptName]) %>;
// 前端单独维护计数器，不要依赖服务端的counter变量
let frontCounter = 0;
// DOM获取逻辑和你原有代码一致
const textBox = document.querySelector(".lineBox");
const nextLine = document.querySelector(".nextLine");
const prompt = document.querySelector(".question");

步骤2：把所有交互逻辑改成前端原生JS实现 #

删掉所有函数里的EJS标签，全部用前端变量做计算：

// 初始化展示第一行台词
textBox.innerHTML = allScriptLines[frontCounter][0];

// 下一行切换函数
function updateLine() {
  frontCounter = frontCounter + 1;
  // 可以加边界判断避免数组越界：frontCounter = Math.min(frontCounter, allScriptLines.length - 1)
  if (allScriptLines[frontCounter][0] == 1) {
    frontCounter = frontCounter + 1;
  }
  textBox.innerHTML = allScriptLines[frontCounter][0];
}

// 提示行函数
function promptLine() {
  frontCounter = frontCounter + 1;
  textBox.innerHTML = allScriptLines[frontCounter][0];
}

// 绑定点击事件
nextLine.onclick = updateLine;
prompt.onclick = promptLine;

额外优化建议 #

• 建议增加计数器边界判断，避免计数器超过台词数组长度时出现报错
• 如果台词内容没有富文本格式，把innerHTML换成textContent更安全，可以避免XSS风险

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