Can a js script get a variable written in a EJS context/page within the same file

Question

As I wrote in the title, I\'d like to get a value from a variable written into a ejs page/file, from a javascript file within the same page

EJS:

<         


        

Answer 1

Inside your <script>,

you can create a div element:

const div = document.createElement('div');

and give it an innerText value like:

div.innerText = `<%= data_from_your_server_response  %>`

If you console.log(div), the data from your server response will be displayed.

Answer 2

Edit: this Half considers you are using EJS on server side

1) You can pass an ejs variable value to a Javascript variable

        <% var test = 101; %> // variable created by ejs
        <script>
           var getTest = <%= test  %>;  //var test is now assigned to getTest which will only work on browsers
           console.log(getTest);  // successfully prints 101 on browser
        </script>

simply create an ejs variable and assign the value inside the script tag to the var getTest

Ex: var getTest = <%= test %>;

2) You can't pass an javascript variable value to a ejs variable

Yes, you cant: if it is on server.

Why:

The EJS template will be rendered on the server before the Javscript is started execution(it will start on browser), so there is no way going back to server and ask for some previous changes on the page which is already sent to the browser.

---

Edit: this Half considers you are using EJS on Client side

3) if EJS is on client side, and pass EJS variable to javascript

The answer above will still work, but you will require to load the script within the EJS template, not the script loaded before the template rendered(in that case it will of-course no be a valid javascript).

4) if EJS is on client side, and pass javascript variable to EJS

I m sorry I have myself not tried this case, but I really look forward if someone answers this case

Answer 3

The above answer didn't work for me. You can use a div this way:

<div id="mydiv" data-test=<%= test %>></div>

And access the data variable 'test' that you gave it in a script tag:

<script>var test = document.getElementById('mydiv').dataset.test</script>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Answer 4

Solution with a string

<% var test =myString; %> // variable created by ejs
        <script>
           var getTest = "<%= test  %>";  //var test is now assigned to getTest which will only work on browsers
           alert(getTest);  // successfully prints the string on browser
        </script>  

Don't forget the quotes around "<%= test %>"