How to use onclick method inside AEM compoenent



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

Accepted Solutions (1)

Accepted Solutions (1)




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>


For JS identifiers, literal numbers, or literal strings

Validates the JavaScript token, outputs nothing if validation fails.


Within JS strings

Encodes characters that would break out of the string.

Answers (0)