Функция привязки в модуле к событию onclick

Question

Итак, у меня есть html-файл со следующим скриптом:

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

Здесь я помещаю логику своего приложения в другие операции импорта.Внутри этого файла app.js у меня есть функция с именем test();

function test() {
    console.log("aaa");
}

Эта функция вызывается в событии onclick в элементе HTML span, динамически добавляемом с помощью этого кода:

buildSideBar(technologies) {
    if(technologies.length > 0) {
        let spans = ``;
        const loader = document.getElementById('loader');
        const sidebar = document.getElementById('sidebar');
        for(const technology of technologies) {
            spans += `<span onclick="test()">${technology}</span>`;
        }
        loader.style.height = '0';
        loader.style.visibility = 'hidden';
        sidebar.innerHTML += spans;
        sidebar.classList.remove('hidden');
    }
}

Пролеты добавляются по назначению, однако, когда я нажимаю их, я получаю Uncaught ReferenceError:

Uncaught ReferenceError: test не определен в HTMLSpanElement.onclick ((index):1)

Что я здесь не так делаю?

Answer 1

Функция test() не была видна за пределами модуля, решение было добавить ее к объекту window, чтобы он был доступен.

window.test= test;

И, как упомянул @VLAZ,Существует также решение для динамического связывания отрезков с нажатием кнопки мыши.