我有一个用JavaScript编写的类。这个类在一个文件中:parcours.js。

module.exports = class Parcours {
constructor(componentList) {
    this.components = componentList;
    this.length = componentList.length;
    this.current = 0; // We start at the first component.
}

next () { // my next function
...

我用chai测试这个类:

const Parcours = require('../app/Parcours');
const expect = require('chai').expect;

describe('Parcours', () => {
describe('Test empty page list', () => {
    it('Constructor : Empty page list should give a zero length, an empty component list and a current to be zero', () => {
        const parcours = new Parcours([]);
        expect(parcours.length).to.equal(0);
        expect(parcours.current).to.equal(0);
...

很管用。一切都很好。

现在，我想把这个类用到一个HTML页面中。我想把这个类实例化为一个对象“Parcours”。

为此，首先我有一个div:

<div hidden='true' id='adjustment-panel'>
<input type='submit' id='previous-ajustment' value='Précédent' onclick='parcours.next()' />
<label for='adjustment'>Ajustement : </label>
...

next是对类parcours的parcours实例的'next'方法的调用。

我的问题是:我不知道如何

1. 将Parcours类导入我的HTML脚本标记
2. 如何将类Parcours实例化为对象“Parcours”
3. 如何在DOM事件onclick（或任何其他事件）中使用它

我尝试了什么:我将类包含在我的身体脚本中，使用:

    <script type='module' src='./app/Parcours.js'></script>
    <script>
        const Etapes = ['player-panel', 'adjustment-panel','target-panel'];
        const parcours = new Parcours(Etapes);
    </script>

但结果却是:

(index):45未捕获的引用错误:在(index):45处未定义Parcours

其中index:45是我在onclick事件中使用parcours.next（）的行:

    <input type='submit' id='previous-ajustment' value='Précédent' onclick='parcours.next()' />

你能给我提供一个很好的方法来做这件事吗？

多谢