Ejs doesn't load when I call a function from another file-CodePudding

Basicly I want to run a function when I clicked the button, but it works when I started the server and go to localhost one time, here's what's supposed to happen, after that localhost page doesn't load. (Unable to connect error)

If I remove the function there is no problem. How can I get it to work only when I click the button ?

Many thanks.

My func.js

const mongoose = require("mongoose");
const axios = require('axios');
async function func() {
//MyCodes
}

module.exports = {
  func: func
}

My index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <button type="button" onClick= <%=  func.func()  %> >Click</button>

//Other codes are independent the button

</body>
</html>

My res.render codeblocks in app.js

var func = require('./func');
app.get("/", (req, res) => {
res.render('index', {
            cName: name,
            symbol: symbol,
            len: finds[0].result.length,
            cPrice: price,
            cDate: date,
            func:func
        });
    });
});
})

CodePudding user response：

You are misunderstanding. You cannot call an internal nodejs function(backend) from the html (frontend). If your frontend need to execute some backend operation like query to mongo, you have these options:

#1 client side rendering (Modern)

This is the most used in the modern world: Ajax & Api

your backend exposes a rest endpoints like /products/search who recieve a json and return another json
this endpoints should be consumed with javascript on some js file of your frontend:

html

<html lang="en">
<head>
  <script src="./controller.js"></script>
</head>
<body>
  <button type="button" onClick="search();" >Click</button>
</body>
</html>

controller.js

function search(){
$.ajax({
  url:"./api/products/search",
  type:"POST",
  data:JSON.stringify(fooObject),
  contentType:"application/json; charset=utf-8",
  dataType:"json",
  success: function(response){
    ...
  }
})
}

Note 1: controller.js contains javascript for browser not for backend : nodejs
Note 2: ejs is only used to return the the initial html, so it is better to use another frameworks like:react, angular, vue

#2 server side rendering (Legacies)

In this case, ajax and js for browser are not strictly required.

Any event on your html should use <form> to trigger an entire page reload
You backend receives any parameter from the , make some operations like mongo queries and returns html instead json, using res.render in your case

(https://img.codepudding.com/202203/780e802b45c548eca050117c63a38ff3.png

Note

Ejs is for SSR = server side rendering, so add ajax could be complex for novices. In this case, use the option #2
You cannot use a nodejs function (javascript for server) in the client side (javascript for browser). Maybe some workaround are able to do that but, don't mix different things.