PUG中onclick属性无响应问题求助

核心问题拆解 #

1. 前后端环境隔离：你在后端路由里定义的getString函数无法直接在前端的onclick事件中调用——后端代码运行在Node.js服务器环境，前端代码在浏览器环境，两者没有共享的执行上下文，直接跨环境调用函数根本行不通。
2. 重复DOM ID：循环生成的按钮都使用id="item"，这违反了HTML规范（ID必须唯一），导致document.getElementById("item")永远只能获取到第一个按钮，无法定位到实际点击的元素。
3. 错误的交互逻辑：要实现“点击按钮传ID到后端，获取altInfo并更新页面”，必须通过异步HTTP请求完成前后端通信，而不是试图直接调用后端函数。

修复步骤 #

1. 修正Pug模板

去掉重复ID，用data-*属性存储食材ID，并绑定前端点击事件：

.lists
  .lists-flex.main-list
    ul#ingredientsList 
      each ingredient in ingredientsList 
        // 用data-id存储食材ID，避免重复ID问题
        button(data-id=ingredient.id)= ingredient.name
 
  .lists-flex.substitute-display
    p= altInfo

2. 添加前端交互脚本

在Pug模板末尾嵌入前端JS，通过fetch发送异步请求到后端，更新页面内容：

script.
  // 给所有食材按钮绑定点击事件
  document.querySelectorAll('#ingredientsList button').forEach(btn => {
    btn.addEventListener('click', async function() {
      const ingredientId = this.dataset.id;
      try {
        // 发送POST请求到后端接口
        const response = await fetch('/get-alt-info', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ id: ingredientId })
        });
        const data = await response.json();
        // 更新页面上的替代信息
        document.querySelector('.substitute-display p').textContent = data.altInfo;
      } catch (err) {
        console.error('请求出错:', err);
        document.querySelector('.substitute-display p').textContent = '获取替代信息失败';
      }
    });
  });

3. 调整后端路由

拆分路由：一个负责渲染初始页面，一个负责处理食材ID的请求并返回替代信息：

// 渲染初始食材列表页面（改用GET请求，符合页面展示的HTTP语义）
app.get("/home", 
  async (req, res, next) => {
    try {
      let list = await res.locals.store.displayAll();
      // 初始显示提示文本
      res.render("lists", {
        ingredientsList: list,
        altInfo: '请选择一种食材查看替代信息'
      })
    } catch(error) {
      next(error)
    }
});

// 处理获取替代信息的请求
app.post("/get-alt-info",
  async (req, res, next) => {
    try {
      const ingredientId = req.body.id;
      // 替换为你实际从数据库获取替代信息的逻辑
      const altInfo = await res.locals.store.getSubstituteById(ingredientId);
      res.json({ altInfo: altInfo || '暂无该食材的替代信息' });
    } catch(error) {
      next(error);
      res.status(500).json({ altInfo: '获取信息失败，请稍后重试' });
    }
});

关键说明 #

• 前后端通信必须通过HTTP请求完成，不能直接调用对方环境的函数；
• DOM元素的ID必须唯一，否则会导致选择器失效；
• 页面展示类请求优先用GET语义，数据交互类用POST（或PUT/DELETE等）。

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