for example in HTL i can access the element using ${ } but how can access the same in js file
i.e html file- ${geo.location} -> this I can easily get location variable in html file
the question is how can I achieve the ${geo.location} inside script tag in the same html itself
You can set an HTML data-attribute that can be accessed by Javascript.
Take a look at the code example below where we are utilizing the HTML data-attribute that will be accessed in the script block.
Sightly.html
<section data-sly-use.taxcal="com.sourcedcode.core.components.models.TaxCalculator"
id="tax-calculator"
data-year="${taxcal.year @ context='scriptString'}"></section>
<script>
const article = document.querySelector('#tax-calculator');
console.log(article.dataset.year);
</script>sourced: https://sourcedcode.com/blog/aem/with-htl-pass-data-from-aem-backend-to-javascript
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.