LWC, show/hide on button click

Question

I have the following template (it's larger, here's only a part of it):

<lightning-record-view-form>
  <div id="prefCenter_Interest" class="prefCenter_Block">
    <h4>ToDo</h4>
    <div if:true={isRoleSelected}>
         <template for:each={objInfo.todoList} for:item='todoListItem'>
               <lightning-input 
                      key={todoListItem.fieldName} 
                      name={todoListItem.fieldName} 
                      label={todoListItem.fieldLabel} 
                      type={todoListItem.fieldType} 
                      value={todoListItem.value} 
                      disabled={todoListItem.disabledRes}
                      checked={todoListItem.value} >
                </lightning-input>
           </template>
           <button type="button" onclick={handleName}>SAVE MY NAME</button>
     </div>
  </div>

And in my JavaScript file it says

export default class ToDoList extends LightningElement {
    isNameSelected = false;

    handleRole(event) {
        this.isRoleSelected = true;
    }
    handleName(event) {
        this.isNameSelected = true;
    }
}

I would expect the first template böock to be visible as soon as I click a button with the handler handleRole.

But instead it displays an error: Uncaught TypeError: Cannot read property 'apply' of undefined throws

What am I missing?

Answer 1

There is no button with handler handleRole in the code you provided, so it's not possible to be sure, but "TypeError: Cannot read property 'apply' of undefined" is thrown when a button is clicked with a handler name that does not exist in the javascript class. You probably have a typo in your html template. Keep in mind that variable names in javascript and lwc templates are case sensitive.