Lightning

LWC: Clicking a button from a JavaScript Method.

When working in LWC, there will be a scenario where you may have to click a button based on some criteria or some condition from backend(Client side JavaScript section). In HTML, for every tag there is a unique attribute Id. Similarly, when working with LWC’s HTML, for every tag there are multiple unique attributes, one such attribute which can be used is data-id=”Unique_Id”.


Usually we use a JS method (in .JS file of LWC) to check Client-side validation or to check some conditions or to prefill a hidden value also to change some CSS value based on some value of a field. So, we can force click a button from a JavaScript method without physically clicking the button on UI screen. Here is a small example of the same. This can be a small and stupid example, but it is required to note the purpose.

In this example I will show you by changing the color of a text field from 2 buttons. And use another button to toggle color.

Please note, I can alter color from the colored buttons only. I text color can be toggled directly in the 3rd button’s method. But for out example, I am clicking the 2 buttons based on a flag. Below of the example.

<lightning-button 
variant="brand" 
class="slds-button" 
data-id="Green_Button" 
label="Text Green" 
onclick={handle_Green_Text_Click}></lightning-button>

As mentioned earlier, data-id=”Green_Button” is the unique id of this button and the same is used in JS file.

Code that will click a button from a JS method

this.template.querySelector('[data-id="Green_Button"]').click();

sample_Test_Component.html

<template>
    <div class="slds-box slds-theme_default">
    <b class={textColorClass}>
        This is a Sample text used as an example to change color. 
        <a href="www.Salesforce.fun">www.Salesforce.fun</a>
    </b>
    <br></br>
    <lightning-button variant="brand" class="slds-button" data-id="Green_Button" label="Text Green" onclick={handle_Green_Text_Click}></lightning-button>
    <lightning-button variant="brand" class="slds-button" data-id="Blue_Button" label="Text Blue" onclick={handle_Blue_Text_Click}></lightning-button>
    <lightning-button variant="neutral" class="slds-button" label="Change Color"  onclick={handle_Color_Change}></lightning-button>
    </div>
</template>

sample_Test_Component.js

import { LightningElement, track } from 'lwc';

export default class Sample_Test_Component extends LightningElement {
    @track options = [];
    @track a_Flag = false;
    @track textColorClass;

    handle_Green_Text_Click(event){
        this.textColorClass = 'green';
    }

    handle_Blue_Text_Click(event){
        this.textColorClass = 'blue';
    }

    handle_Color_Change(event){

        if(this.a_Flag){
            this.template.querySelector('[data-id="Green_Button"]').click();
            this.a_Flag = ! this.a_Flag;
        }
        else {
            this.template.querySelector('[data-id="Blue_Button"]').click();
            this.a_Flag = ! this.a_Flag;
        }

    }
}

sample_Test_Component.css

.green{
    color:green;
}
.blue{
    color:blue;
}

sample_Test_Component.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output:

JS Buttom Click Demo

This method is usually used when working with any of the Lightning Data Service(LDS) tags. Assume, a scenario where you want to execute Ignore and Save option. In such cases you may have to click the Submit button of LDS Tag.

2 thoughts on “LWC: Clicking a button from a JavaScript Method.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s