Как вызвать метод объекта javascript из HTML
У меня есть следующий класс:
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>
Но когда я пытаюсь использовать метод объекта, как показано ниже:
<li><a class = "btn-floating green" onClick='cursor.toggleSelector()'><i class = "material-icons">done</i></a></li>
У меня есть следующая ошибка:
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)
type = "module"src = "./js/index.js" не могли бы вы здесь сделать сначала пробел между двумя атрибутами и попробовать еще раз?
Привет, @VimalPatel, да, это было внизу, я переместил его на тег body, но все равно не работает
@lortschi да, я сделал это, кажется, все еще не работает
Отвечает ли это на ваш вопрос? Модули ES6: неопределенная функция onclick после импорта
Вот как область видимости работает с модулями ES6.
@goto1 goto1 хм, я пробовал это, но, похоже, все еще не работает
@DionNeo вы сделали это неправильно - вернитесь к этому ответу и попробуйте еще раз. Вы никуда не экспортируете cursor, поэтому вы не можете его импортировать.
И вы не вносите все изменения, которые они предлагают.
Попробуйте установить класс следующим образом: const class Cursor { ... } и отделите в последней строке: export default Cursor;
@ goto1 Я внес изменения, которые они предложили, но здесь это не отражено, и я не думаю, что то, что они предложили, решило проблему. В любом случае спасибо, это сработало, когда я объявил его глобальным var
@lortschi const class Cursor { ... } определенно недопустимый синтаксис...
сори без константы :)
Опять же, проблема не в этом, проблема в том, что все объявления внутри модуля относятся к этому модулю, посмотрите ответ, который я привел выше, для правильного решения и объяснения.
не уверен, что это действительно так, но удаление type = "module" может сработать
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Когда вы пытаетесь вызвать onClick='cursor.toggleSelector()' , объект курсора должен присутствовать в области видимости объекта Window.
Объем модуля, в котором определен курсор, отличается.
попробуйте что-то подобное в index.js, должно сработать.
По сути, это присвоение курсора объекту Window, что позволяет вызывать из элемента HTMLAnchor.
import Cursor from './state.js'
const cursor = new Cursor(null);
window.cursor = cursor;
Вы загружаете свой файл index.js внизу html? Если да, пожалуйста, переместите это в раздел тела