如何在index.php的onclick属性中调用js子目录下的外部JS文件方法？

第一步：在index.php中引入JS文件 #

你需要先在index.php的HTML代码中引入/js/file.js，建议放在</body>闭合标签前，避免阻塞页面渲染，代码如下：

<!-- 放在index.php的</body>标签前 -->
<script src="/js/file.js"></script>
</body>

路径开头加/是从站点根目录开始寻址，可避免相对路径在不同路由下加载失败的问题。

第二步：在/js/file.js中定义可调用的函数 #

把你要触发的交互逻辑封装成全局命名函数，比如菜单开闭逻辑示例：

// /js/file.js 中的代码
function toggleMenu() {
  // 这里写你要执行的开闭菜单、其他交互逻辑
  const menu = document.querySelector('.你的菜单元素选择器')
  menu.classList.toggle('active')
}

第三步：在onclick属性中直接调用函数 #

给菜单图片的onclick属性直接填写刚才定义的函数名即可：

<img src="你的图片地址" alt="菜单按钮" onclick="toggleMenu()">

• 如果调用时提示函数未定义，先按F12打开控制台查看/js/file.js是否加载成功，检查文件路径是否匹配
• 不要在onclick属性里填写JS文件路径，浏览器不会直接执行外部文件内容，必须先引入文件再调用内部暴露的全局函数

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