Bdtjtk

Background:

I am using ElectronJS to make a game and I have a class for a shop which I named Shop.
It has a method that I call 'createItemElement' which takes an object named 'item' and creates an li element to be later added to a ul element. The code for this can be found below.

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;



  }



  // ...



}

Problem:

Interestingly, all of the HTML is correctly rendered and everything looks as it should, but the 'onclick' event just plain does not work.
Since all of these elements are in fact being rendered, it should be safe to assume that the code is indeed being run in the renderer process.
For some reason, however, the event is not being carried over to the app.
When I click the button in the app, nothing happens.
I checked the devTools and looked at the elements individually.
As expected, all of the elements were listed out correctly in element inspector, but when I inspected that 'addButton' button, there was no 'onclick' property to be seen.
Also, there are no errors in the console whatsoever, so that's nice (sarcasm).
And I am aware that there are many seemingly similar questions asked on StackOverflow, but none of the answers that I found have helped or applied to my situation.
It is extremely confusing as to why the elements are being rendered perfectly but the event listener is not working.

The full project can be found here and the file being excerpted below can be found here.

I looked at your shop.js page, and you incorrectly camel-case the onclick event in one place, but not in another. Using the camel-cased version of onclick will yield no error and do nothing.

Won't work:

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

Works:

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

As I can see from you're code, you're using el.innerHTML in the shop instance .getHTML() method. this will return the inner HTML as a raw string without any event listeners, this is why you see the rendered content as expected but the click listener doesn't work.

In the sketch.js file, the toggleShop function should use appendChild so instead of:
document.querySelector("#shop-container").innerHTML = shop.getHTML();

you should do:

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

and in the Shop class add the getElement method:

getElement() {

    return this.el;

}

Be sure to toggle the shop and remove the #shop-container innerHTML when you want to toggle it off.

Also, as @Andy Hoffman answered, you should set the onclick property and not the onClick.