如何从HTML中调用JavaScript对象方法？解决cursor未定义报错

这个问题的核心原因是ES模块的作用域隔离特性：当你用<script type="module">加载脚本时，脚本里的变量（比如你定义的cursor）默认只存在于模块内部的作用域中，不会自动挂载到全局的window对象上，所以HTML里的内联onclick事件找不到它。

下面给你两种可行的解决方法：

方法一：手动将cursor暴露到全局作用域 #

在你的index.js里，把cursor挂载到window对象上，这样全局就能访问到它了：

import Cursor from './state.js'
const cursor = new Cursor(null)
// 手动暴露到全局
window.cursor = cursor

这样修改后，HTML里的onclick='cursor.toggleSelector()'就能正常调用方法了。

方法二：使用事件监听替代内联onclick（更推荐） #

内联事件绑定不仅有作用域问题，还不利于代码的维护和分离。更规范的做法是在JS模块里直接给元素绑定事件：

1. 先给你的<a>标签加一个唯一的ID，方便获取元素：

<li><a id="toggleSelectorBtn" class="btn-floating green"><i class="material-icons">done</i></a></li>

2. 然后在index.js里添加事件监听：

import Cursor from './state.js'
const cursor = new Cursor(null)

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('toggleSelectorBtn')
  btn.addEventListener('click', () => {
    cursor.toggleSelector()
  })
})

这种方式不需要依赖全局变量，代码结构更清晰，也符合现代前端的最佳实践。

为什么你之前的尝试无效？ #

你写的这段代码存在两个问题：

<script type="module" src="./js/index.js">import {cursor} from "./js/index.js";</script>

1. <script type="module">标签如果指定了src属性，标签内部的代码会被忽略，不会执行。
2. 即使你单独写了import，cursor依然是模块内部的变量，没有暴露到全局，HTML里还是访问不到。

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