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:
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.
Akhil Kulkarni 
Thank you sir
LikeLike
Exactly what I was looking for. Rockstar!
LikeLiked by 1 person
Thank you for comments.
Hope everything is in detail and reasonable understandable.
LikeLike