如何在HTML文件中调用外部JS中嵌套在其他函数内部的函数

• JavaScript遵循词法作用域规则：函数内部定义的嵌套函数，仅能在父函数的私有作用域内被访问，全局作用域无法直接获取。
• 你当前的代码中myFunction被定义在init函数内部，只有init执行时才会创建这个函数，且访问范围被限制在init函数体内部。HTML的内联onclick逻辑运行在全局作用域下，根本检索不到这个私有函数，因此触发myFunction is not defined的报错。

• 方案1：将嵌套的myFunction移到和init平级的全局作用域下定义
  调整后的main.js代码：

  function init(){
    // 原有init内部的业务逻辑保持不变
  }
  
  // 平级定义myFunction，挂在全局作用域下
  function myFunction() {
      alert('hi')
  }
  

  这种方式改动最小，全局作用域可以直接访问到myFunction，匹配内联onclick的调用逻辑。
• 方案2：必须保留函数嵌套结构时，手动将内部函数暴露到全局对象
  调整后的main.js代码：

  function init(){
    function myFunction() {
        alert('hi')
    }
    // 将内部函数挂载到window全局对象上对外暴露
    window.myFunction = myFunction
  }
  // 需手动执行一次init，完成函数的挂载流程
  init()
  

• 方案3：移除HTML内联事件属性，通过DOM API绑定事件（推荐）
  这种写法不需要暴露私有函数，避免全局空间污染，长期维护性更高。
  调整后的HTML代码：

  <input type="radio" name="layerButton" value="UnTiled" id="raster">Raster Layer
  <script type="text/javascript" src="./main.js" ></script>
  

  调整后的main.js代码：

  function init(){
    function myFunction() {
        alert('hi')
    }
    // 给对应DOM元素绑定点击事件
    document.getElementById('raster').addEventListener('click', function(){
      if(this.checked){
        myFunction()
      }
    })
  }
  // 等待DOM加载完成后执行初始化逻辑
  window.addEventListener('DOMContentLoaded', init)
  

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