Passing sightly property or variable inside js function

[LaMind3]

I am trying to pass slightly property - ${tabs.id} to openSection() as shown below.

<button class="tablinks" onclick="openSection(event, ${tabs.id}-section)">${tabs.tabname}</button>

But I see - onclick="openSection(event, -section)" in html when component is rendered.

whereas below expression works.

<div id="${tabs.id}-section" class="section">

html output:  

<div id="first-section" class="section">

How can pass this property to openSection() to make this work?

[Manjunath_K]

Hi @LaMind3 

Add @context as mentioned below & it will work as expected.

< button class ="tablinks" onclick ="openSection(event, ${tabs.id @context = 'text'}-section)" > ${tabs.tabname} </ button >

-Manjunath

[BrianKasingli · Accepted solution]

When passing data to HTML or JavaScript, You are missing the display context option, @context, mentioned by @LaMind3  try using "text", or "scriptString". If none of those work, have a look at the HTL documentation for other context options.

< button class ="tablinks" 
   onclick="openSection(event, ${tabs.id @context = 'scriptString'}-section)" > 
   ${tabs.tabname} 
</button >

Also, take a look at this blog article, as it explains, With HTL, How to Pass Data from AEM Backend to Javascript - https://sourcedcode.com/blog/aem/with-htl-pass-data-from-aem-backend-to-javascript

[LaMind3]

I added 'scriptString' context and it worked fine.

< button class ="tablinks" onclick="openSection(event, ${tabs.id @CONTEXT = 'scriptString'}-section)" > 

When I add @CONTEXT = 'text' , it prints html on page.

Thanks for guiding me.

[Nikhil-Kumar]

@LaMind3 

Try using @content along with the sightly prop that you are fetching and displaying.