CODEWITHSUNDEEP
javascripthtml
noobmaster64
noobmaster64

Reputation: 85

How to call javascript object method from within HTML

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)

Upvotes: 0

Views: 233

Answers (1)

valex
valex

Reputation: 116

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;

Upvotes: 1

Related Questions