How to run nodejs with html like vanilla js-CodePudding

I am very new to node so I need help with this one. I understand how to display a html file using nodejs such as this:

(node)

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


http.createServer(function (req, res) {
  fs.readFile("test.html",(err, data) => {
    if(!err) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
    }
  });
}).listen(8080);

However, I want to know how I would use this to do things you would do in js such as

(js)

document.getElementById("thisElement").style.backgroundColor = "#234";
document.getElementById("thisElement").addEventListener("click",() => {
 doThings();
});

And other related js stuff.

CodePudding user response：

I understand how to display a html file using nodejs such as this:

That does not "display an HTML file using nodejs".

That sends an HTML file to a an HTTP client such as a web browser.

A web browser can display an HTML file.

However, I want to know how I would use this to do things you would do in js such as

Web browsers take HTML, generate a DOM, run JavaScript with client-side Web APIs and provide a UI for the user to interact with it.

Node.js doesn't.

The JavaScript programming language is a general purpose programming language.

Web browsers provide particular APIs for doing things that are useful to do in a web browser.

Node.js provides APIs for doing things in other contexts (such as running an HTTP server or writing command line utilities).

You can't take JS designed to run in a web browser and run it in Node. It doesn't make sense.

(You can write code which runs in both contexts (generating a random number to take a trivial example) but most code isn't that generic).

CodePudding user response：

You see this line on your codes fs.readFile("test.html",(err, data) => {

this line goes and pick test.html file, which is available on your client side now, anything relating to this test.html file is a client thing since its html, in it you will declare tags and javascript file references as below

<html>
    <body>

    <script src = "../../to/js/files.js"></script>
    <!-- or as below -->
    <script>
      //now in here you get to do your fun stuffs as you asked above
       document.getElementById("thisElement").style.backgroundColor = "#234";
       document.getElementById("thisElement").addEventListener("click",() => {
       doThings();
      });
    </script>
    </body>
</html>

CodePudding user response：

I don't think you can do it on this way with node because it's not its purpose, node was made to serve things not to change html or act on browser stuff as you want, there's no DOM on node.

BUT, You can try reading the file and editing it inserting content, but it will be such an hard thing to do once you will need to change the text and it will probably being an array or you can try it with express termplate engine, you can use templates that are mutable when you serve it with node, so you can use variables as html values.

https://expressjs.com/en/resources/template-engines.html