Express Pug中无法引入JS文件，下拉框触发alert失效求助

我来帮你一步步排查这个下拉框alert不触发的问题，大概率是脚本加载、函数定义或事件绑定的细节出了问题：

1. 先确认Pug里的脚本引入是否正确 #

你用的script(src="commandLine.js")写法本身是对的，但要注意脚本放置的位置：建议把它放在<body>标签的末尾（也就是所有DOM元素之后），这样能确保浏览器先渲染完下拉框，再加载你的JS文件，避免出现“元素还没生成就绑定事件”的问题。

比如正确的Pug结构可以是这样：

doctype html
html
  head
    title 下拉框测试
  body
    //- 先写下拉框DOM
    select(onChange='myFunction()')
      option(value='opt1') 选项1
      option(value='opt2') 选项2
    //- 再引入脚本
    script(src='commandLine.js')

2. 检查commandLine.js里的函数定义 #

要确保myFunction是全局作用域的函数，不能被包裹在局部作用域里（比如IIFE、模块函数）。比如你的JS文件应该是这样：

// commandLine.js
function myFunction() {
  alert('你选中了下拉框选项！');
}

如果你的函数是用const/let定义的（比如const myFunction = () => {...}），它会被限制在模块作用域里，内联的onChange调用不到，这时候要么改成全局函数，要么换用事件监听的方式（更推荐）。

3. 换用更可靠的事件绑定方式（替代内联onChange） #

内联事件有时候会因为作用域或拼写问题出bug，你可以试试在JS里直接绑定事件，同时确保DOM加载完成后再执行：

// commandLine.js
// 等待DOM完全加载
document.addEventListener('DOMContentLoaded', function() {
  // 获取下拉框元素
  const dropdown = document.querySelector('select');
  // 绑定change事件
  dropdown.addEventListener('change', function() {
    alert(`选中的值是：${this.value}`);
  });
});

对应的Pug里就不用写onChange属性了：

select
  option(value='opt1') 选项1
  option(value='opt2') 选项2

4. 排查常见的坑 #

• 脚本是否真的加载了：打开浏览器控制台（F12），切换到Network标签，刷新页面，看commandLine.js的状态码是不是200。如果404，说明路径不对（比如服务器没把当前目录设为静态资源目录，比如用Express的话需要加app.use(express.static(__dirname))）。
• 函数是否存在：在控制台里直接输入myFunction()，如果提示“未定义”，说明函数没被正确暴露到全局。
• 大小写问题：HTML原生事件是onchange（小写），虽然Pug支持驼峰onChange，但保险起见可以写成小写试试。

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