Кнопка onClick Event Listener не работает в приложении Electron

Question

Справочная информация:

Я использую ElectronJS для создания игры, и у меня есть класс для магазина, который я назвал Магазин.У него есть метод, который я называю «createItemElement», который берет объект с именем «item» и создает элемент li для последующего добавления к элементу ul.Код для этого можно найти ниже.

class Shop {
  
  // ...

  createItemElement(item) {

    // Item Container
    const li = document.createElement("li");

    // Title
    const title = document.createElement("h3");
    title.textContent = item.title;

    // Info
    const info = document.createElement("p");
    info.textContent = `Type: ${item.type}`;

    // Add to Cart
    const addButton = document.createElement("button");
    addButton.textContent = "Add to Cart";
    addButton.onclick = () => console.log("Adding to cart!");
    
    li.appendChild(title);
    li.appendChild(info);
    li.appendChild(addButton);
    return li;

  }

  // ...

}

Проблема:

Интересно, что весь HTML-код корректно отображается и все выглядит так, как должно, но «onclick»Событие просто не работает.Поскольку все эти элементы фактически визуализируются, можно с уверенностью предположить, что код действительно выполняется в процессе визуализации.Однако по какой-то причине событие не переносится в приложение.Когда я нажимаю кнопку в приложении, ничего не происходит.Я проверил devTools и посмотрел на элементы в отдельности.Как и ожидалось, все элементы были правильно перечислены в инспекторе элементов, но когда я проверил эту кнопку «addButton», свойства onclick не было видно.Кроме того, нет никаких ошибок в консоли, так что это хорошо (сарказм).И я знаю, что в StackOverflow задается много, казалось бы, похожих вопросов, но ни один из найденных ответов не помог и не применился к моей ситуации.Это крайне сбивает с толку, почему элементы визуализируются идеально, но слушатель событий не работает.

Полный проект можно найти здесь , а файл, приведенный ниже, можно найти здесь .

Answer 1

Как видно из вашего кода, вы используете el.innerHTML в экземпляре магазина .getHTML() метод.это вернет внутренний HTML как необработанную строку без каких-либо прослушивателей событий, поэтому вы видите обработанный контент, как и ожидалось, но прослушиватель щелчков не работает.

В файле sketch.js, toggleShop функция должна использовать appendChild, поэтому вместо: document.querySelector("#shop-container").innerHTML = shop.getHTML();

вы должны сделать:

document.querySelector("#shop-container").appendChild(shop.getElement())

и в классе Shop добавить getElement method:

getElement() {
    return this.el;
}

Обязательно переключите магазин и удалите #shop-container innerHTML, когда вы хотите отключить его.

Также, как ответил @Andy Hoffman, вы должны установитьonclick свойство, а не onClick.

Answer 2

Я посмотрел на вашу страницу shop.js , и вы неправильно указали случай onclick в одном месте, но не в другом.Использование верблюжьей версии onclick не приведет к ошибке и ничего не сделает.

Не будет работать:

empty_cart_button.onClick = (evt) => this.emptyCart();

Работает:

addButton.onclick = () => this.addToCart(item);