I am making a web application using node.js. I'm handling the server side via Express and using ejs templates to serve up the webpages. My issue is that I have a function in my index.js file and it is referenced in my ejs file in the button's onclick event. Currently I'm only logging a statement in the console to make sure it works. Now every time I restart the server and open up my home route, I see the message logged into the console but when I click the actual button, nothing happens. The fuction executes on the server start/restart but not when the button is clicked. I've tried writing the function entirely inside the ejs page using the correct ejs syntax and tags. Every time the same issue occurs; the function executes when the homepage is refreshed and logs the message in the console but nothing happens when the button is clicked.

I'm guessing since I'm calling the function in the res.render route, it gets executed once the page is rendered. How do I go about making changes so that the function executes once the button is clicked?

Here's the function for the button (inside index.js):

function clicker() {
  console.log("Button Working!");
};

Here's the index.js code that handles the route for this function:

app.get("/", (req, res) => {
  res.render("home", {
    x: clicker()
  });
});

Button Tag inside my home.ejs:

<button class = 'btn btn-primary' onclick = "<%=x%>">Click Me!</button>

Console view:

I am making a web application using node.js. I'm handling the server side via Express and using ejs templates to serve up the webpages. My issue is that I have a function in my index.js file and it is referenced in my ejs file in the button's onclick event. Currently I'm only logging a statement in the console to make sure it works. Now every time I restart the server and open up my home route, I see the message logged into the console but when I click the actual button, nothing happens. The fuction executes on the server start/restart but not when the button is clicked. I've tried writing the function entirely inside the ejs page using the correct ejs syntax and tags. Every time the same issue occurs; the function executes when the homepage is refreshed and logs the message in the console but nothing happens when the button is clicked.

I'm guessing since I'm calling the function in the res.render route, it gets executed once the page is rendered. How do I go about making changes so that the function executes once the button is clicked?

Here's the function for the button (inside index.js):

function clicker() {
  console.log("Button Working!");
};

Here's the index.js code that handles the route for this function:

app.get("/", (req, res) => {
  res.render("home", {
    x: clicker()
  });
});

Button Tag inside my home.ejs:

<button class = 'btn btn-primary' onclick = "<%=x%>">Click Me!</button>

Console view:

• javascript
• html
• node.js
• express
• ejs

• You are confusing client side and server side code – charlietfl Commented Oct 17, 2020 at 20:45

1 Answer 1

You are calling the function itself instead of passing it:

app.get("/", (req, res) => {
  res.render("home", {
    x: clicker() // -> THIS GET EXECUTED
  });
});

Istead you should write

app.get("/", (req, res) => {
  res.render("home", {
    x: clicker // -> THIS PASS AS OBJECT/FUNCTION
  });
});

Now it should get executed when you click on the button.

BUT: Im not sure if you define "clicker" on the server side, its gets passed to the client. The "clicker" function must be available on the client side, not server side. Move the defition on the client side and reference only the function name:

{
  x: "clicker"
}