onclick事件在index.html生效，在main.js中失效的问题求助

出现这个错误的核心原因是：内联onclick事件运行在全局作用域，而你放在main.js里的startDraw函数默认不在全局作用域中（比如JS文件以模块方式加载，或者函数仅在文件局部作用域内），导致浏览器找不到这个函数。

下面是几种可行的解决办法：

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

直接在main.js里把函数暴露到全局：

window.startDraw = function(point) {
  console.log(point);
};

这样内联onclick就能在全局作用域找到startDraw函数，直接调用。

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

这是更符合现代前端开发规范的做法，避免全局污染，也更易维护：

1. 先修改HTML，移除内联onclick属性：

<a class="card-link add-point-btn">Add Point</a>

2. 在main.js中通过事件监听器绑定点击逻辑：

// 定义函数（无需暴露到全局）
function startDraw(point) {
  console.log(point);
}

// 绑定点击事件
document.querySelector('.add-point-btn').addEventListener('click', function() {
  startDraw('Point');
});

方法3：检查JS文件的加载方式 #

如果你的main.js是通过<script>标签引入的，确保：

• 脚本标签在目标<a>元素之前加载，或者添加defer属性（确保DOM加载完成后再执行JS）：

<script src="main.js" defer></script>

• 不要给脚本标签加type="module"，模块模式下的函数默认不会暴露到全局作用域（如果必须用模块，优先用方法1或2）。

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