Pug模板渲染传递的参数无法在onclick事件中访问如何解决

错误原因 #

你之前的推测不正确，问题根源不是事件绑定时机早于参数传递，而是Pug 模板的渲染上下文和前端浏览器的 JS 运行上下文是完全隔离的两个环境。你通过res.render传递的testvar默认只能在 Pug 模板的渲染逻辑中使用，写在script(type="text/javascript").后的内容属于前端静态 JS 代码，Pug 会直接原样输出到最终的 HTML 中，不会自动把模板变量注入到前端 JS 作用域里，所以前端运行时自然找不到testvar变量。

解决方法 #

方法1：直接将模板变量注入前端JS作用域

通过Pug的非转义输出语法!{}，把模板变量序列化后写入前端JS代码中，推荐用JSON.stringify处理变量，可以兼容字符串、数字、布尔值、普通对象等多种类型，也避免手动处理引号的问题。

修改你的test.pug的script部分即可：

script(type="text/javascript").
    // 将Pug模板变量注入前端全局作用域
    const testvar = !{JSON.stringify(testvar)};
    window.addEventListener('DOMContentLoaded', function(){
        document.getElementById('play-button').addEventListener('click', async () => {
            console.log(testvar);
            console.log('ready');
        });
    }, false);

如果传递的变量包含用户输入内容，建议提前做XSS过滤再输出。

方法2：将变量挂载到DOM自定义属性

如果不想污染全局作用域，可以把参数存在DOM元素的自定义data-*属性上，前端JS通过DOM的dataset属性读取。

第一步修改按钮的Pug代码，添加自定义属性：

button(type = 'button' id = 'play-button' data-testvar=testvar) Click to play

第二步修改前端点击事件的代码，从DOM属性读取参数：

script(type="text/javascript").
    window.addEventListener('DOMContentLoaded', function(){
        document.getElementById('play-button').addEventListener('click', async (e) => {
            const testvar = e.target.dataset.testvar;
            console.log(testvar);
            console.log('ready');
        });
    }, false);

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