Call JS function in html on server side (nodejs)

Question

I have an index.html

    <!DOCTYPE html>
<html>
    <head>
        <title>Server-side Example</title>
        <script src="./CircleArea.js"></script>
            </head>
    <body>
        <input
        id="ftpd"
        type="button"
        value="Calculate"
        onclick="CircleArea()"
        />
    </body>
</html>

It calls the CircleArea.js file.

const PI = 3.14
let radius = 3;

    function circleArea(){
         var inputField = document.createElement("INPUT");
         inputField.setAttribute("type", "text");
         inputField.setAttribute("value", (PI*radius*radius));
         document.body.appendChild(inputField);
    }
    
    module.exports ={circleArea}; // This I added for nodejs

It works fine. But I now want to run Index.html on the server-side.

I added server.js

let http = require('http');
let fs = require('fs');

let handleRequest = (request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/html'
    });
    fs.readFile('./Index.html', null, function (error, data) {
        if (error) {
            response.writeHead(404);
            respone.write('Whoops! File not found!');
        } else {
            response.write(data);
        }
        response.end();
    });
};

http.createServer(handleRequest).listen(8000); 
console.log('Server running at http://localhost:8000');

Now node server.js

gives error

CircleArea.js:1 
        
       Uncaught SyntaxError: Unexpected token '<'
(Index):13 
        
       Uncaught ReferenceError: CircleArea is not defined
    at HTMLInputElement.onclick ((Index):13:6)

My question is how should I modify Index.html and CircleArea.js to run it on nodejs?

Please don't fix your code by applying an answer. Now, a part of my answer doesn't make sense. I rollback the change. — user16540390
– user16540390, Commented Apr 30, 2022 at 11:45

score 2 · Accepted Answer · 2022-04-30 11:09:48Z

2

Your code has nothing to do with server-side evaluation. You're using Node.js as a web server. The server doesn't evaluate the client code. It doesn't import CircleArea.js. You don't need

module.exports ={circleArea}; // This I added for nodejs

and should remove it. It's a CommonJS module export and not allowed in browser code.

A web browser sends a request for index.html. The server responds with the content of Index.html. The browser evaluates it. It finds a script tag for ./CircleArea.js and sends a request for this file. The server responds with the content of Index.html because there is no routing in the server. Open the dev tools in your browser to see the problem. The server responds with the same data (the content of Index.html) for all requests. You have to implement routing.

let http = require('http');
let fs = require('fs');

let handleRequest = (request, response) => {
  let file = 'Index.html';
  if (request.url === '/CircleArea.js') {
    file = 'CircleArea.js';
    response.writeHead(200, {
      'Content-Type': 'application/javascript',
    });
  } else {
    response.writeHead(200, {
      'Content-Type': 'text/html',
    });
  }
  fs.readFile('./' + file, null, function (error, data) {
    if (error) {
      response.writeHead(404);
      response.write('Whoops! File not found!');
    } else {
      response.write(data);
    }
    response.end();
  });
};

http.createServer(handleRequest).listen(8000);
console.log('Server running at http://localhost:8000');

This is a very basic and simple solution. You can use it for a very simple routing. For a more complex routing I recommend a framework like Nest.js

edited Apr 30, 2022 at 11:09

answered Apr 30, 2022 at 10:20

user16540390

Sign up to request clarification or add additional context in comments.

3 Comments

Shahgee Over a year ago

The errors remain the same after replacing the content of server.js according to your suggestions. I think I am not getting your point and am still not able to call CircleArea() function.

user16540390 Over a year ago

@Shahgee I fixed my code. You have typos in your code. You have response and respone and CircleArea() and circleArea(). Keep in mind that code and most file systems are case-sensitive. Index.html is not indext.html.

user16540390 Over a year ago

@Shahgee A working live example: stackblitz.com/edit/node-8els8f?file=server.js

Collectives™ on Stack Overflow

Call JS function in html on server side (nodejs)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related