How to use onclick method inside AEM compoenent

[saravananr10875]

Hi All,

Am having a AEM6 html component, am getting the values from dialog and using it inside the component via the .js file and using the return properties.

I could able to get the authored values but it is getting null or empty when am using it inside the onclick method. Please find below the code snippet below.

<div data-sly-unwrap data-sly-use.test="test.js"></div>

<a href="#" class="${test.testId}" id="${test.testId}" onClick="toggleDraw('${test.testId}')" >

The content I authored is getting displayed in class and Id, but it is not displaying in the  onClick method.

Below is the Output am getting after authoring.

<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('')" >

Output I needed is :

<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('get-a-quote')" >

Many thanks,

Saravanan R

[arunpatidar · Accepted solution]

I would suggest add a unique class to the a tag and use separate javascript to bind the ob click method.

The reason why value is getting trimmed because you are not using correct context

<a href="#whatever" onclick="${myFunctionName @ context='scriptToken'}()">Link</a>

scriptToken	For JS identifiers, literal numbers, or literal strings	Validates the JavaScript token, outputs nothing if validation fails.
scriptString	Within JS strings	Encodes characters that would break out of the string.