动态创建按钮部署到服务器后无法调用函数问题排查

核心问题：作用域不匹配 #

服务器部署后JS文件可能是以模块模式（<script type="module">）加载的，模块内部定义的函数默认不会暴露到全局作用域；而通过setAttribute("onclick", "copyToClipboard();")绑定的事件，会在全局作用域里查找copyToClipboard函数，自然找不到。本地运行时你的JS文件可能没启用模块模式，函数处于全局作用域，所以能正常调用。

另外你的代码里有两个无效设置需要修正：

• copyBtn.style.id = "copyBtn" 错误，id不是样式属性，应直接写 copyBtn.id = "copyBtn"
• copyBtn.style.className = "main-copyBtn" 错误，className不是样式属性，应直接写 copyBtn.className = "main-copyBtn"

解决办法（推荐第一种） #

1. 改用事件监听器绑定（最稳妥）
   放弃setAttribute绑定onclick的方式，直接用addEventListener绑定函数，不受作用域限制：

   var copyBtn = document.createElement("button");
   copyBtn.innerHTML = "Copy to clipboard";
   // 替换原setAttribute行
   copyBtn.addEventListener('click', copyToClipboard);
   copyBtn.style.fontSize = "20px";
   copyBtn.id = "copyBtn";
   copyBtn.className = "main-copyBtn";
   

2. 把函数暴露到全局作用域（不推荐，易污染全局）
   如果一定要保留onclick属性的写法，在定义函数时将其挂载到window对象上：

   window.copyToClipboard = function copyToClipboard() {
     //do something
   }
   

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