如何从HTML中调用javascript对象方法

我有以下课程：

export default class Cursor {
    currentMode = modes.highlight
    //methods to modify currentMode
    toggleSelector = () => {
        this.currentMode = modes.selector
    }

然后将其导入并实例化到Index.js文件中：

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

然后，我通过以下方式将index.js加载到index.html文件中：

<script type="module"src="./js/index.js"></script>

有办法解决这个问题吗

编辑：

我现在已经按照建议这样做了，但仍然不起作用：

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

---

当您尝试调用onClick='cursor.toggleSelector（）'时，游标对象需要出现在窗口对象的作用域中。
定义游标的模块的范围不同

在index.js中尝试类似的方法，它应该可以工作
基本上，它将光标分配给窗口对象，从而允许从HTMLAnchor元素调用

从“./state.js”导入光标
常量游标=新游标（空）；
window.cursor=游标；

您是否正在加载html底部的index.js文件？如果是，请将其移动到body sectiontype=“module”src=“./js/index.js”中。您能在这两个属性之间先留出一个空格，然后再试一次吗？嘿@VimalPatel是的，它在底部，我已将其移动到body标记，但仍然无效。这是否回答了您的问题？这就是范围界定如何与

ES6

模块一起工作。

cursor not defined

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

(index):27 Uncaught ReferenceError: cursor is not defined
at HTMLAnchorElement.onclick ((index):27)