function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Raksha NarayanRaksha Narayan 

QuerySelector not working within template tag in LWC

I want to get the 'Enter the message...' in JS. Below is my LWC code:
<template>
    <lightning-card title="Raksha: Mock Email to Case Automation">
        <lightning-card if:true={showAutoResponseRuleModal}>
            <div class="slds-container_small">
                <template for:each={xmldata} for:item="mapKey">
                    <lightning-layout-item key={mapKey.booleanFilter} size="12">
                        <a></a>
                        <p data-id="test"> Enter the message... </p>
                    </lightning-layout-item>
                </template>
            </div>
        </lightning-card>
    </lightning-card>
</template>

JS:
const result = this.template.querySelector('test');
I am not able to get the message in JS. Can anyone please let me know what I am missing?
mukesh guptamukesh gupta
Hi Raksha,

Please use below line of code in .JS:-
  
const element = this.template.querySelector('[data-id="test"]');

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh
Raksha NarayanRaksha Narayan
Hi Mukesh,
I tried the above code. But on printing element it is giving me null. 
mukesh guptamukesh gupta
Hi Raksha,

You need to add this line in 
  
renderedCallback() {
        const element = this.template.querySelector('[data-id="test"]');
        console.log('renderedCallback==>> '+element);
    }

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh
 
Raksha NarayanRaksha Narayan
Hi Mukesh. I tried with this and it worked.
let recordName = this.template.querySelector('[data-id="test"]').innerText;
Thanks
mukesh guptamukesh gupta
Hi Rakesh,

You have remomed Best Answer, any reason?



Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh