Button onClick Event Listener not working in Electron app

user_10848176 0
Viewed 3098

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.

electron html javascript
2 Answers

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);
user_9492170

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.

user_7750140
Related