Express项目加载script.js报404错误 前端JS与HTML绑定失效求助

问题原因&修复方案 #

1. 404报错根源

你的Express服务当前仅配置了/路由返回index.html文件，没有开启静态资源托管，所以浏览器发起的script.js请求无法被服务端响应，返回404状态码。
修复方案：在login.js中添加静态资源托管规则，代码如下：

const app = express();
// 新增下面这一行，托管根目录下的所有静态文件
app.use(express.static(__dirname));

2. script.js代码逻辑错误

你在script.js中选取密码输入框的ID写错了：HTML里密码框ID是user-password，但js里写的是user-pass，会导致获取元素为null，后续监听事件无法绑定。
修复方案：修改script.js对应行：

// 替换错误的ID选择
const userpass = document.getElementById("user-password");

3. script标签加载时机错误

你把script标签放在了head标签内，js代码执行时页面DOM还没渲染完成，此时获取form、输入框等元素都会得到null，代码无法正常执行。
修复方案：把index.html里的script标签从head中移动到</body>闭合标签的前面，如下：

</main>
    <!-- 把script标签移到这里 -->
    <script type="text/javascript" src='script.js'></script>
  </body>  
</html>

按上述三个步骤修改完成后重启服务即可正常运行。

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