已定义validator函数仍报Uncaught ReferenceError错误的解决方法

我编写了一个validator()函数，要求网站用户勾选同意复选框后，点击Accept按钮打开GIS地图。该代码在CodePen中无报错（但点击Accept未加载URL，不确定CodePen是否支持此功能），但在我们的CMS中出现错误：Uncaught ReferenceError: validator is not defined at HTMLInputElement.onclick。我已确认JS代码的页面引用方式正确（与自定义CSS引用方式一致），尝试将函数放在HTML的<script>标签中（调用代码之前）仍无效，且无主代码库访问权限，作为JavaScript初学者，寻求该错误的解决办法。

现有代码 #

HTML代码 #

<form name="agreement" style="text-align: center;"> 
  <input type="checkbox" id="agreement" name="agreement"> 
  <br> <br> 
  <input type="button" value="Accept" onclick="validator()">  
</form>

JavaScript代码 #

function validator() {
  if (document.getElementById("agreement").checked) {
    location.assign(
      "http://galvcountymaps.maps.arcgis.com/apps/webappviewer/index.html?id=d619c89878cd4c399b376b51996a7541"
    );
  } else {
    alert("You must check on the agreement.");
  }
}

方法1：改用事件监听绑定（推荐） #

很多CMS会将JS代码包裹在闭包或严格模式环境中，导致全局函数无法被内联onclick调用。改用事件监听可以避开作用域问题，同时更符合现代JS开发规范。

1. 修改HTML，移除按钮的onclick属性，添加唯一ID：

<form name="agreement" style="text-align: center;"> 
  <input type="checkbox" id="agreement" name="agreement"> 
  <br> <br> 
  <input type="button" value="Accept" id="acceptBtn">  
</form>

2. 更新JavaScript代码，在DOM加载完成后绑定点击事件：

document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮和复选框元素
  const acceptBtn = document.getElementById('acceptBtn');
  const agreementCheckbox = document.getElementById('agreement');

  // 绑定点击事件
  acceptBtn.addEventListener('click', function() {
    if (agreementCheckbox.checked) {
      location.assign("http://galvcountymaps.maps.arcgis.com/apps/webappviewer/index.html?id=d619c89878cd4c399b376b51996a7541");
    } else {
      alert("You must check on the agreement.");
    }
  });
});

方法2：将函数挂载到全局window对象 #

如果一定要保留内联onclick，可以强制把函数暴露到全局作用域，确保CMS的闭包不会影响它的可访问性：

window.validator = function() {
  if (document.getElementById("agreement").checked) {
    location.assign(
      "http://galvcountymaps.maps.arcgis.com/apps/webappviewer/index.html?id=d619c89878cd4c399b376b51996a7541"
    );
  } else {
    alert("You must check on the agreement.");
  }
}

方法3：确认DOM加载顺序 #

如果使用方法2仍无效，确保JS代码在页面元素加载完成后执行。可以把脚本放在HTML的</body>标签之前，或者用DOMContentLoaded包裹函数（和方法1的逻辑一致）。

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