How to put a Node.js variable inside my <script> </script>?

Question

Problem:

I have Firebase code in a script tag, but it is not executing. How can I write the variable <% = id%> in it?

Usually, when I click the button, a request to update the upvote value in Firebase should be launched, but nothing happens.

The code is not executing, but I am not getting errors.

---

CODE:

file.ejs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.gstatic.com/firebasejs/3.5.0/firebase.js"></script> <script> // Initialize Firebase // TODO: Replace with your project customized code snippet var config = { apiKey: "info", authDomain: "info", databaseURL: "info", storageBucket: "info", messagingSenderId: "info" }; firebase.initializeApp(config); </script> <div class ="containerMarginsDetails"> <h1 class= "detailsTitle"><%=post.title %></h1> <div class="row"> <img class = "postImg" src="/images/uploads/<%= post.image %>"> <span class="UpvoteButton"> </span><span class="DownvoteButton"> </span> <span class="HP"><%= post.upvotes - post.downvotes%> HP</span> </div> </div> <script> var upvotesRef = firebase.database().ref("posts/fun/<%=id%>/upvotes"); var downvotesRef = firebase.database().ref("posts/fun/<%=id%>/downvotes"); $('.UpvoteButton').click(function () { upvotesRef.transaction(function (upvotes) { if (!upvotes) { upvotes = 0; } upvotes = upvotes - 1; return upvotes; }); }); </script> 

---

Here is the router file.

file.js

 var express = require("express"); var router = express.Router(); var firebase = require("firebase"); router.get('/details/:id', function(req, res){ global.page_name = "fun"; var id = req.params.id; var funPostRef = firebase.database().ref("posts/fun/"+id); funPostRef.once('value', function(snapshot){ var funPost = snapshot.val(); res.render('fun/details', {post: funPost, id:id}); }); }); module.exports = router; 

---

NB: Firebase is also initialized in my app.js.

EDIT:

If I try this version of the code, the firebase request is triggered every time I reload the page, and not when I click. How can I make sure that it only works when clicked?

 <% var upvotesRef = firebase.database().ref("posts/fun/"+id+"/upvotes"); var downvotesRef = firebase.database().ref("posts/fun/"+id+"/downvotes"); %> $('.UpvoteButton').click(function () { <% upvotesRef.transaction(function (upvotes) { if (!upvotes) { upvotes = 0; } upvotes = upvotes + 1; return upvotes; }); %> }); 

EDIT 2:

An error has been detected! What does it mean?

This is very strange since I am authenticated when I click the button, and these are my security rules:

 { "rules": { ".read": "true", ".write": "auth != null" } } 

EDIT 3:

I also get the following error message (no crash):

The synchronous XMLHttpRequest in the main thread is deprecated due to its detrimental effects on the end user. For more help check out https://xhr.spec.whatwg.org/ .

EDIT 4:

If I change my rules to:

 { "rules": { ".read": "true", ".write": "true" } } 

The button works great!

But why does the code not work with the previous rule, although I am authenticated?

Answer 1

Since you are using a template language, you do not need the + operators:

 var upvotesRef = firebase.database().ref("posts/fun/<%=id%>/upvotes"); 

Answer 2

You can try the echo of the id with <% - id%>

Unfortunately, I cannot comment (not enough rep), otherwise I would ask if you see the identifier if you check the button.