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
– Vimal Patel, Commented Dec 19, 2020 at 13:41
type="module"src="./js/index.js" could you here make first between the two attributes a whitespace and try again? — lortschi
– lortschi, Commented Dec 19, 2020 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
– noobmaster64, Commented Dec 19, 2020 at 13:49
Does this answer your question? ES6 Modules: Undefined onclick function after import — goto
– goto, Commented Dec 19, 2020 at 13:50

Wai Ha Lee · Accepted Answer · 2020-12-20 00:49:42Z

1

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;

edited Dec 20, 2020 at 0:49

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Dec 19, 2020 at 14:08

valex

1264 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call javascript object method from within HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related