如何在Node.js中通过HTML按钮更简便地调用自定义JS函数？

你现在的核心问题是搞混了前后端的执行环境：Node.js服务端本身没有浏览器的document对象，完全没必要在服务端用JSDOM模拟DOM来绑定按钮事件——按钮点击这类交互逻辑本来就该在客户端浏览器里执行，服务端只需要把HTML和JS文件发给浏览器就行。

具体修改步骤： #

1. 清理服务端代码
   把服务端脚本里所有JSDOM相关的代码全部删掉，服务端只保留静态文件托管的逻辑即可：

const fetch = require("./fetch");
const http = require('http');
const fs = require('fs');
var url = require('url');
const port = 3000

const server = http.createServer(function(req, res) {
    var q = url.parse(req.url);
    var filename = "." + q.pathname;
    console.log(req.url)

    if (req.url == '/') {
        res.writeHead(301, { Location: 'http://localhost:3000/frontpage.html' })
        res.end()
    } else {
        fs.readFile(filename, function(error, data) {
            if(error) {
                res.writeHead(404)
                res.write('Error: File Not Found')
            } else {
                res.writeHead(200, { 'Content-Type': 'text/html' })
                res.write(data)
            }
            return res.end()
        })
    }
})

server.listen(port, function(error) {
    if (error) {
        console.log('Something went wrong', error)
    } else {
        console.log('Server is listening on port ' + port)
    }
})

2. 把事件绑定逻辑移到客户端JS
   在你的fetch.js里添加事件绑定代码，确保DOM加载完成后再获取按钮元素：

// fetch.js
// 你的register_medication函数
function register_medication() {
    // 这里写按钮点击后的逻辑，比如发送请求等
    console.log("按钮被触发了");
}

// 等待DOM完全加载后绑定事件
document.addEventListener('DOMContentLoaded', () => {
    const button = document.getElementById("meinButton");
    button.addEventListener("click", register_medication);
});

3. 修正HTML的script标签错误
   你HTML里的scr是拼写错误，改成src才能正确加载JS文件：

<script src="fetch.js"></script>
<button id="meinButton">Klick mich!</button>

为什么这个方案更简单？ #

• 不需要安装任何额外依赖，完全利用浏览器原生的DOM API。
• 符合前后端职责划分：服务端只负责提供静态资源，用户交互逻辑交给客户端处理，这才是正确的执行流程。

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