0

This is my LWC code I am trying button onclick function but it is not working (even alert is not working) and I had attached my piece of code here please let me know what is the correction.

Html

<template>
    <div class="c-container">
        <lightning-layout vertical-align="stretch" multiple-rows="true" class="x-large">
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="1" onclick={handleActive}>
                <div class="slds-p-left_medium input">
                    <lightning-icon icon-name="standard:avatar"  alternative-text="Search" title="Account"></lightning-icon>
                    <lightning-button variant="base" label="Profile" title="Profile" class="slds-m-left_x-small"></lightning-button>
                    <lightning-icon icon-name="Utility:search"  alternative-text="Search" title="Account"></lightning-icon>
                </div>
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="2" onclick={handleActive}>
                <div class="slds-p-left_medium input">
                    <lightning-icon icon-name="standard:account"  alternative-text="Search" title="Account"></lightning-icon>
                    <lightning-button variant="base" label="Customer" title="Profile" class="slds-m-left_x-small"></lightning-button>
                    <lightning-icon icon-name="Utility:search"  alternative-text="Search" title="Account"></lightning-icon>  
                </div>
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="3" onclick={handleActive}>
                <div class="slds-p-left_medium input">
                    <lightning-icon icon-name="custom:custom17" alternative-text="Search" title="Account"></lightning-icon>
                    <lightning-button variant="base" label="Payment" title="Profile" class="slds-m-left_x-small"></lightning-button>
                    <lightning-icon icon-name="Utility:search"  alternative-text="Search" title="Account"></lightning-icon>   
                </div>
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="4" onclick={handleActive}>
                <div class="slds-p-left_medium input">
                    <lightning-icon icon-name="standard:case"  alternative-text="Search" title="Account"></lightning-icon>
                    <lightning-button variant="base" label="Case" title="Profile" class="slds-m-left_x-small"></lightning-button>
                    <lightning-icon class="yellow-icon" icon-name="Utility:search"  alternative-text="Search" title="Account"></lightning-icon>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </div>
<c-customer-support-input-search></c-customer-support-input-search>
<!-- <c-customer-support-input-search button-clicked={buttonClicked}></c-customer-support-input-search> -->
</template>

JS

import { LightningElement, api, wire, track } from 'lwc';
export default class Customer_support_apppage extends LightningElement {
    selectedOption ="";
    buttonClicked= false;

    handleProfile(event) {
        this.selectedOption = 'Profile';
        this.buttonClicked= true;
        alert(this.selectedOption)
    }

    handleCustomer(event) {
        this.selectedOption = 'Customer';
        this.buttonClicked= true;
        alert(this.selectedOption)
    }

    handlePayment(event) {
        this.selectedOption = 'Payment';
        this.buttonClicked= true;
        alert(this.selectedOption)
    }

    handleCase(event) {
        this.selectedOption = 'Case';
        this.buttonClicked= true;
        alert(this.selectedOption)
    }
}
1
  • You have a little mistake in lightning-layout-item. Please change the function name in the onclick of lightning-layout-item from the handleActive to respective handleProfile, handleCustomer, handlePayment and handleCase. Aug 31, 2023 at 10:13

2 Answers 2

-1

The issue here is you have written onclick={handleActive}. There is no function written in js with this name. You need to update this with the following.

#1: Replace `<lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="1" onclick={handleActive}>`
    With `<lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="1" onclick={handleProfile}>`

#2: Replace `<lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="2" onclick={handleActive}>
                <div class="slds-p-left_medium input">`
    With `<lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="2" onclick={handleCustomer}>
                <div class="slds-p-left_medium input">` 
                
#3: Replace `<lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="3" onclick={handleActive}>`
    With `<lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="3" onclick={handlePayment}>`

#4: Replace `<lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="4" onclick={handleActive}>`
    With `<lightning-layout-item flexibility="auto" padding="around-small" class="custom-box" value="4" onclick={handleCase}>`
2

Your handleActive doesn't exist; you wrote four other functions. You can collapse these into a single function called handleActive:

handleActive(event) {
  const options = [null, 'Profile', 'Customer', 'Payment', 'Case'];
  this.selectedOption = options[event.target.value];
  this.buttonClicked = true;
  alert(this.selectedOption);
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .