如何在HTML的onclick事件中调用JavaScript嵌套函数？

嵌套在ingadd里的recpag属于函数作用域内的私有函数，只能在ingadd的函数体内部被访问，外部（包括HTML的内联onclick事件）无法直接获取到它的引用，这就是你调用失败的原因。下面提供几种可行的解决方案：

方案一：将内部函数暴露到全局作用域 #

通过把recpag挂载到window对象上，让它成为全局可访问的函数：

function ingadd (){
  // 原有业务代码
  function recpag (){
    // recpag的逻辑代码
    console.log('recpag函数被执行');
  }
  // 将内部函数挂载到全局window对象
  window.recpag = recpag;
}
// 必须先执行ingadd，才能让recpag被全局访问
ingadd();

HTML中直接调用：

<button onclick="recpag()">触发recpag</button>

注意：如果多次执行ingadd，后续的recpag会覆盖之前的全局引用，同时全局变量可能带来命名冲突风险。

方案二：使用DOM事件监听（推荐） #

避免全局变量，在ingadd内部直接给目标元素绑定点击事件，此时recpag处于当前作用域内，可直接被引用：
HTML给元素添加ID：

<button id="recpagBtn">触发recpag</button>

JavaScript代码：

function ingadd (){
  // 原有业务代码
  function recpag (){
    // recpag的逻辑代码
    console.log('recpag函数被执行');
  }
  // 获取目标元素并绑定点击事件
  document.getElementById('recpagBtn').addEventListener('click', recpag);
}
// 执行ingadd完成事件绑定
ingadd();

方案三：让外部函数返回内部函数 #

通过ingadd的返回值获取recpag的引用，再赋值给全局变量使用：

function ingadd (){
  // 原有业务代码
  function recpag (){
    // recpag的逻辑代码
    console.log('recpag函数被执行');
  }
  // 返回内部函数的引用
  return recpag;
}
// 执行ingadd，将返回的recpag保存为全局变量
const globalRecpag = ingadd();

HTML中调用：

<button onclick="globalRecpag()">触发recpag</button>

内容的提问来源于stack exchange，提问作者love to code