Express搭配EJS开发时onclick事件无法调用函数问题求助

问题根因 #

• 服务端控制器内的click变量未赋值：你在控制器中声明了let data, click;但全程没有给click变量赋值，最终传递给模板的click是undefined，渲染后按钮的onclick属性为空，自然无法触发执行逻辑。
• 混淆了服务端EJS变量和前端JavaScript的作用域：你定义的click函数是需要在用户浏览器端执行的前端逻辑，和服务端渲染的EJS变量属于完全隔离的上下文，不需要也不能通过服务端渲染参数传递。

解决方案 #

方案1：直接在前端绑定函数（适配你的现有需求，最简单） #

1. 将click函数放到EJS模板的<script>标签中，放在页面任意位置即可，推荐放在</body>标签前：

<script>
function click() { 
  console.log("You have clicked") 
}
</script>

2. 修改按钮的onclick属性，直接写函数调用，不需要调用EJS变量：

<button type="button" class="btn btn-outline-warning btn-sm" onclick="click()">Download</button>

3. 清理控制器中无用的click相关代码，简化后代码如下：

exports.getPortfolioOnDue = async (req, res, next) => { 
  let data; 
  try { 
    data = await listBlobs(matchExp, containerClient, res) 
  } catch (error) { 
    res.send(error) 
  } 
  res.render('portfoliodue', { 
    isAuthenticated: req.session.isAuthenticated, 
    configured: isConfigured(req), 
    data: data
  }); 
}

方案2：需要从服务端传递动态参数的场景 #

如果你的点击逻辑需要带入服务端的动态参数（比如当前行的文件标识），可以直接构造可执行的JS代码字符串传递给模板：

1. 控制器中传递需要调用的逻辑标识：

res.render('portfoliodue', { 
  // 其余参数不变
  clickHandler: 'downloadFile'
});

2. 模板中拼接参数调用函数：

<button type="button" class="btn btn-outline-warning btn-sm" onclick="<%= clickHandler %>('<%= data[i] %>')">Download</button>

3. 前端实现对应函数即可：

<script>
function downloadFile(filename) {
  console.log("要下载的文件是：", filename)
}
</script>

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