为何这段代码无法校验Passcode有效性？checkValidity函数无弹窗反馈

以下是几个常见原因和对应的解决方案：

1. 函数不在全局作用域（常见于模块化脚本） #

如果你的脚本标签添加了type="module"，函数会被限制在模块作用域内，全局无法访问。解决方法是把函数挂载到window对象：

修改script.js：

const Pass = '2207'

// 将函数挂载到window，让全局可访问
window.checkValidity = function() {
  const pass_code = document.getElementById("passcode").value;
  // 用严格相等===避免类型转换意外
  if (pass_code === Pass) {
    alert("Correct Passcode!");
  } else {
    alert("Wrong Passcode!");
  }
}

2. 脚本加载路径错误或时机不对 #

• 检查script.js的路径是否正确，确保文件和HTML在同一目录，或者路径填写无误。
• 确保脚本在DOM元素之后加载，避免DOM未初始化时执行脚本。可以把<script>标签放在</body>标签前：

<body>
  <div id="display">
    <p style="color:black">Enter your Passcode:</p>
    <input id="passcode" type="password">
    <button onclick="checkValidity()">Enter↵</button>
  </div>
  <!-- 脚本放在body末尾，确保DOM已加载 -->
  <script src="script.js"></script>
</body>

3. 检查浏览器控制台定位问题 #

按F12打开开发者工具，切换到Console标签，查看是否有报错信息：

• 如果显示checkValidity is not defined：说明函数未在全局注册，对应方案1解决。
• 如果显示Cannot read properties of null (reading 'value')：说明找不到输入框，检查输入框ID是否拼写正确（你的代码里ID是passcode，和getElementById一致，这个概率低）。

额外建议：用===严格相等运算符替代==，避免类型转换导致的意外判断结果。

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