How to call javascript object method from within HTML

Question

I have the following class :

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

which I then import and instantiate in my Index.js file:

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

I then load the index.js into my index.html file via:

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

But when i try to use the object method as seen below:

<li><a class="btn-floating green" onClick='cursor.toggleSelector()'><i class="material-icons">done</i></a></li>

I have the following error:

cursor not defined

Is there a way to fix this?

Edit:

I have now done this as recommended but still does not work :

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

But still having this:

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

Are you loading your index.js file at bottom of the html? If yes please move that in body section — Vimal Patel, Dec 19 '20 at 13:41
type="module"src="./js/index.js" could you here make first between the two attributes a whitespace and try again? — lortschi, Dec 19 '20 at 13:45
Hey @VimalPatel yes it was at the bottom, i have shifted it to the body tag but doesn't work still — noobmaster64, Dec 19 '20 at 13:49
Does this answer your question? [ES6 Modules: Undefined onclick function after import](https://stackoverflow.com/questions/44590393/es6-modules-undefined-onclick-function-after-import) — goto, Dec 19 '20 at 13:50
@goto1 hmms, i have tried that but doesnt seem to work still — noobmaster64, Dec 19 '20 at 13:56
@DionNeo you did it wrong - go back to that answer and try again. You're not exporting `cursor` anywhere, so you **cannot** import it. — goto, Dec 19 '20 at 13:56
Try to set the class this way: const class Cursor { ... } and separate in the last line: export default Cursor; — lortschi, Dec 19 '20 at 14:03
@goto1 I've made the changes they suggested, but it's not reflected here, and I don't think what they raised solved the problem tho. Thanks anyways, it worked when i declared it as a global var — noobmaster64, Dec 19 '20 at 14:03
@lortschi `const class Cursor { ... }` is definitely invalid syntax... — goto, Dec 19 '20 at 14:04
Again, that's not the issue here, the issue is that all declarations inside a module are scoped to that module, have a look at the answer I linked above for the proper solution and explanation. — goto, Dec 19 '20 at 14:08
not sure if this is valid, but removing the type="module" might work — Shrikanth Buds, Dec 19 '20 at 14:32

score 1 · Accepted Answer · edited Dec 20 '20 at 00:49

When you try to call onClick='cursor.toggleSelector()' , cursor object would be needed to be present in scope of the Window object.
The scope of module where cursor is defined is different .

try something like this in the index.js, it should work.
Basically, it is assigning cursor to the Window object , which allows to call from the HTMLAnchor element.

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

How to call javascript object method from within HTML

1 Answers1