如何在Express+Handlebars项目中给模板按钮绑定点击事件并获取输入值

• 你出现document is not defined报错，是因为你把操作DOM的JavaScript代码写在了服务端的Node.js运行环境（也就是Express的路由文件里），Node环境没有浏览器的document、window等DOM/BOM对象，只有浏览器端执行的JS才能调用这些API操作页面元素。

步骤1：配置Express静态资源目录 #

首先在你的Express入口文件（一般是app.js/index.js）中添加静态资源托管配置，用来存放客户端的CSS、JS等文件：

// 托管public目录下的所有静态资源，路径前缀可自定义
app.use('/static', express.static('public'))

然后在项目根目录新建public文件夹，再在public下新建js文件夹用来存放客户端JS代码。

步骤2：修改login.hbs模板 #

给页面元素添加id标识，同时在模板末尾引入外部的客户端JS文件，不要把交互逻辑直接写在模板里：

<div>
    <input type="email" id="emailInput" placeholder="enter email"/>
    <button id="submitBtn">Do something with email</button>
</div>

<!-- 引入外部客户端JS，路径对应刚才配置的静态资源路径 -->
<script src="/static/js/login.js"></script>

步骤3：编写独立的客户端逻辑文件 #

在刚才新建的public/js目录下创建login.js文件，所有前端交互逻辑都写在这里：

// 等待DOM加载完成再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    const emailInput = document.getElementById('emailInput')
    const submitBtn = document.getElementById('submitBtn')

    // 绑定点击事件
    submitBtn.addEventListener('click', function() {
        const email = emailInput.value.trim()
        if (!email) {
            alert('请输入邮箱')
            return
        }
        // 这里写后续处理逻辑，比如调用后端登录接口
        console.log('输入的邮箱是：', email)
        // 提交请求到后端示例
        /*
        fetch('/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ email: email })
        }).then(res => res.json()).then(data => {
            // 处理后端返回结果
        })
        */
    })
})

可选：添加后端登录接口处理逻辑 #

如果需要把前端获取的邮箱提交到后端处理，在服务端的routes/login.js中添加POST路由即可：

// 注意提前在Express入口配置json解析中间件：app.use(express.json())
router.post('/', function(req, res) {
    const { email } = req.body
    // 这里写后端登录逻辑，比如数据库校验等
    console.log('收到前端提交的邮箱：', email)
    res.json({ code: 0, msg: '请求成功', data: email })
})

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