传递的函数未被调用：JavaScript按钮传参函数无法执行问题

你的代码里出现的问题，核心原因是函数引用被意外转成了字符串，导致最终传递给submit的不是可执行的函数，而是一个字符串值。

为什么原代码失效？ #

当你点击第一个按钮调用alerts(callthis)时，你确实把callthis函数作为参数传进去了。但在alerts函数拼接HTML字符串的时候，x（也就是callthis函数对象）会被自动执行toString()方法，转成类似"function callthis() { ... }"或者"callthis"的字符串。最终生成的按钮代码是：

<button onclick="submit('callthis')">Yes</button>

这里传给submit的是字符串"callthis"，而不是真正的函数引用。所以当你点击Yes按钮时，submit函数里尝试调用x()，本质是在调用一个字符串，自然会失败。

两种解决方案 #

方案1：临时修复（依赖全局变量）

如果想继续用字符串拼接的方式，可以传递函数的名称（字符串形式），然后在submit里通过全局window对象获取并调用函数：

function alerts(funcName) { 
  document.getElementById('dialogfoot').innerHTML = '<button onclick="submit(\'' + funcName + '\')">Yes</button>'; 
}
function submit(funcName) { 
  // 通过window对象访问全局函数
  window[funcName](); 
}
function callthis() { alert('welcome call me'); }

对应的HTML调整为：

<button onclick="alerts('callthis')">submit</button>
<div id="dialogfoot"></div>

这种方式能解决问题，但依赖全局变量，不是最推荐的写法。

方案2：推荐写法（使用事件监听）

更符合现代JavaScript规范的做法是避免内联onclick，通过动态创建元素并绑定事件监听，这样可以完整保留函数引用：

function alerts(callback) { 
  const dialogFoot = document.getElementById('dialogfoot');
  // 先清空容器内容
  dialogFoot.innerHTML = '';
  
  // 创建按钮元素
  const confirmBtn = document.createElement('button');
  confirmBtn.textContent = 'Yes';
  
  // 绑定点击事件，直接调用传入的回调函数
  confirmBtn.addEventListener('click', () => {
    callback();
  });
  
  // 将按钮添加到容器中
  dialogFoot.appendChild(confirmBtn);
}
function callthis() { alert('welcome call me'); }

HTML部分保持不变：

<button onclick="alerts(callthis)">submit</button>
<div id="dialogfoot"></div>

这种写法不会有字符串转换的问题，因为我们直接把callback（也就是callthis函数）保存在了事件监听的闭包里，点击按钮时能直接执行它。

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