how can I access a javascript variable in my HTL attribute

[rahul234dabas]

<sly data-sly-test=${isTrue}>

                <input type="radio" id="north-america" name="regions" value="north-america" class="destaco-input-radio">

                <label for="north-america">${"America" @ i18n, context='html'}</label>

</sly>

<script>

    var isTrue= true;

</script>

I am confused about how to use the "isTrue" variable inside my data-sly-test statement so that I can execute this piece of code

Thank you

I have to use this variable for both "true" and "false" statements

Please help me find out how to do it .

Thank you

[anika_agarwal]

Please find similar query posted @ https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/pass-value-from-js-to-sly-... 

Please see if this helps.

Thanks

Anika

[arunpatidar · Accepted solution]

Hi,

You cannot use client side javascript variables value for server side execution.

You can always execute the code and based on javascript condition show/hide or do business logic on client side.

[Mohit_KBansal]

As mentioned by Arun, you can not use clientSide variables to render server side scripts.

In this case, you render your HTML and use javascript to show/hide block based on js Variable value.

<div class="showInput">
    <input type="radio" id="north-america" name="regions" value="north-america" class="destaco-input-radio">
    <label for="north-america">${"America" @ i18n, context='html'}</label>
</div>

# Hide showInput div block on page load
<style type="text/css">
    .showInput {
        display: none;
    }
</style>

<script>
    if(isTrue) {
        // Display showInput div block if JS object is true
    }
</script>