Use JS to change innerHTML and return a markdown

I have created a function, inside of a JS file, that changes the innerHTML using template literals when I press a button.

In the example below ${ title } is expected to change when I press the button.

element.innerHTML = {{ range (where .Data.Pages "Title" **"${  title  }"**) }}{{ .Name }}{{ .Content }}{{ end }}

The output, rendering on my page, returns this…

{{ range (where .Data.Pages "Title" "${  1. Introduction  }") }}{{ .Name }}{{ .Content }}{{ end }}

instead of this…

  1. Introduction

Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem.

Is there a way to tell hugo to change the InnerHTML in JS, while keeping its variable display capability inside of HTML?

Hugo doesn’t work like that, you will have to ouput your JS script and then do all the transformation with JS if you need it to be dynamic.

Update: If your question is about how to output the proper variable, I would use the printf command.