Dynamically set the onclick function in LWC button

Question

I'm trying to dynamically set the onclick function of lightning web component button but it's not working. I've tried both "click" and "onclick"

JS:

const navButton = this.template.querySelector('.nav-button');
navButton.label = "Done";
navButton.addEventListener('onclick',this.handleShowMenu);

HTML:

<lightning-button 
   class="slds-m-left_small nav-button"
   label="Next"
   variant="brand"
   onclick={handleNext}>
</lightning-button>

Answer 1

You don't have to manually apply onclick event listener to <lightning-button>. But you can handle this or any other event in the container component. Just define the function handleNext:

<!--container.html-->
<template>
   <lightning-button class="slds-m-left_small nav-button"
                     label="Next"
                     variant="brand"
                     onclick={handleNext}>
   </lightning-button>
</template>

/* container.js */
export default class Container extends LightningElement {

   handleNext(event) {
       // handle onclick event
   }

}