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

这个报错的核心原因是ES模块有独立的作用域，你在index.js里定义的cursor变量默认只在模块内部可见，不会自动暴露到全局的window对象上，所以内联的onclick事件找不到它。下面给你几种可行的解决办法：

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

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

import Cursor from './state.js'
const cursor = new Cursor(null)
// 新增这一行，把cursor暴露到全局
window.cursor = cursor

这样你的内联onclick='cursor.toggleSelector()'就能正常工作了。

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

内联事件绑定不太符合现代模块化的开发习惯，更优雅的方式是在模块内部直接给元素绑定事件：

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

// 获取目标元素
const toggleBtn = document.querySelector('.btn-floating.green')
// 绑定点击事件
toggleBtn.addEventListener('click', () => {
  cursor.toggleSelector()
})

然后把HTML里的onclick属性删掉就行：

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

这种方式不需要污染全局作用域，代码的耦合度更低。

为什么你后来的修改无效？ #

你尝试的这个写法是错误的：

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

带有src属性的<script type="module">标签不能同时包含内部代码，浏览器会忽略标签里的内容，直接加载src指定的文件。所以这个修改根本没生效，自然还是会报错。

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