外部JS文件中showP函数调用报错：Uncaught ReferenceError问题排查

问题场景 #

我有一个切换密码框显示/隐藏状态的showP函数，代码如下：

function showP() {
    var x = document.getElementById("passw");
    if (x.type === "password") {
      x.type = "text";
    } else {
      x.type = "password";
    }
}

将该函数放入外部main.js文件，通过<script src="main.js"></script>引入HTML页面，页面调用代码如下：

Password:<br>
<input type="password" name="password" required id="passw">
<input type="checkbox" onclick="showP()">

当函数放在HTML内的<script>标签中时可正常运行，但外部引入时触发报错：

Uncaught ReferenceError: showP is not defined
at HTMLInputElement.onclick

报错核心原因 #

这个问题主要由两种情况导致：

1. 函数未暴露到全局作用域
   如果main.js里的showP函数被包裹在局部作用域中（比如自执行函数(function(){ ... })()），或者使用了模块化语法（如export/import），函数就不会挂载到window全局对象上。而onclick属性中的代码是在全局作用域下执行的，自然找不到未全局暴露的showP函数。

2. 脚本加载时机不匹配
   如果引入main.js的<script>标签位置靠后，或者脚本加载未完成时用户就点击了复选框，此时showP函数还未被浏览器解析定义，就会触发未定义的报错。

对应解决办法 #

• 强制暴露全局函数
  将函数直接挂载到window对象上，确保全局可访问：

  window.showP = function() {
      var x = document.getElementById("passw");
      if (x.type === "password") {
        x.type = "text";
      } else {
        x.type = "password";
      }
  }
  

• 调整脚本加载时机
  把<script src="main.js"></script>放在<head>标签内并添加defer属性（延迟执行至DOM加载完成）：

  <script src="main.js" defer></script>
  

  或者将脚本标签放在</body>闭合标签之前，确保DOM和脚本都加载完成后再响应用户操作。

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