32

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:

<% var test = 101; %>

JS:

<script>
    var getTest = test;
</script>

Or what if I'd like to use a function (with parameter) written into a EJS file and use this function in a JS context where the parameter is given to the function from JS context

EJS:

<% function fn(par){ ... } %>

JS:

<script>
   var test = 101;
   <%>fn(test)<%> 
</script>
Donovant
  • 3,091
  • 8
  • 40
  • 68
  • If you use _ejs_ server side then you need to do something like [then answer of Naeem Shaikh](http://stackoverflow.com/a/28603921/1960455), but you probably should do it another way (depends on the exact use-case). If you run _ejs_ client side, then this will still work, but then you most likely have don't a wrong design decision. – t.niese Feb 19 '15 at 10:30

6 Answers6

29

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

Naeem Shaikh
  • 15,331
  • 6
  • 50
  • 88
  • What if I'd like use a function, with a parameter, written in a EJS context, and the parameter should be put in from js script context? EJS: `<%>function fn(par){ . . .}<%>`; JS: `var test=101; <%>fn(test)<%>` – Donovant Feb 19 '15 at 10:29
  • I have tried the first solution and it is not working, I did console the "test" and it is showing a `syntax error` which is justified as the inside the _script_ tag only JS code can go and `<%%>` is not part of JS. Naeem, can you please explain the way it worked for you? – Neeraj Sewani Sep 28 '21 at 08:42
  • Seems like you need to give `type="text/javascript"` to `script` to make the first option work. – Neeraj Sewani Sep 28 '21 at 09:04
  • If the type of var is areay it will be transfered to string – mercury Jun 17 '22 at 09:44
  • This is explained well! Thank you! – Antonio Pavicevac-Ortiz Apr 06 '23 at 19:41
11

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

Hugo
  • 541
  • 7
  • 21
5

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 %>"
Laurent Gevaert
  • 75
  • 3
  • 7
1

If test is an object, you can use this:

<script>
  let getTest = <%- JSON.stringify(test) %>
</script>

Sadly though, depending on what your code editor is, it may be showing that this syntax is bad and will be underlining it with red to mark it as a syntax error. However, this works perfectly fine when you run it.

IMPixel
  • 98
  • 1
  • 8
0

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.

we_mor
  • 478
  • 5
  • 20
0

The following is a solution that does not use a div, and also does not make my code editor mad.

<%-'<script>'%>
  let testVar = <%-JSON.stringify(testVar)%>;
<%-'</script>'%>

<script>
  //main script that uses testVar
</script>
NanoNewt
  • 1
  • 1