Combining normal JavaScript with Node.js JavaScript in a Web Application

Question

Hello I am trying to design a very simple web application with Express.js that just sends your email address that you submitted to the server side. But when I try to combine normal JavaScript (like querySelector) with code that has Express.js contents, it does not work and crashes saying that document in document.getElementById("email") is not defined. May I ask if there is a way to do this? Or how should I send data from the client side to the server side and vice versa properly?

This is my first very simple project in web development so the code is not the best.

JavaScript Code

const express = require("express")
const app = express();
const path = require("path")


app.use(express.static("./"))

app.listen(5000, () => {
    console.log("Server listening on port 5000...")
})

app.get("/", (req, res) => {
    res.sendFile("index.html", (err) => {
          console.log(err)
    })
})

let enterEmail = document.getElementById("email")

let submit = document.getElementById("submit")
let status = document.getElementById("status")

let email;

submit.addEventListener("click", (e) => {
    email = enterEmail.value 
    enterEmail.value = ""
    status.innerHTML = "Submitted email: " + email;
})

HTML Code

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        
        <input id ="email" placeholder="enter email" type="text"></input>
        <input id="submit" type="submit">
        <h1 id="status">Submitted email: </h1>

        
        <script src="./index.js"></script>

    
    </body>
</html>

The error message:

let enterEmail = document.getElementById("email")
                 ^

ReferenceError: document is not defined
    at Object.<anonymous> (C:\Users\Lenovo\Desktop\personal-projects\app.js:23:18)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)   
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47
[nodemon] app crashed - waiting for file changes before starting...

I'm not familiar with Express but an undefined document error sounds unusual, can you post the error message please. First thought relates to the #email element not existing at the time you attempt to reference it, but that error would relate specifically to the element. — Dave Pritlove, Nov 10 '22 at 22:34
There's a discussion that might help here: https://stackoverflow.com/questions/24647839/referenceerror-document-is-not-defined-in-plain-javascript — Dave Pritlove, Nov 10 '22 at 22:36
I have added the error message as part of the question - thank you! — zach, Nov 10 '22 at 22:49
I'm not sure if you know the difference between server and client side environments. NodeJS runs on the server and has no access to any document. The client side must send the data to it, usually with an http request. If you're familiar with PHP or the likes, that's distantly kinda how it works. — code, Nov 11 '22 at 00:02
@code Actually yes I wasn't very sure about the server and client side differences, I will look into PHP or similar, thank you — zach, Nov 11 '22 at 13:49

score 1 · Answer 1 · answered Nov 13 '22 at 10:25

1

Express and Node.js are server environment which can't access the DOM or the document. If you want to check if your JavaScript is working in your HTML, try using browser's console (press f12 on browser you are working on then click console).

You might want to use console.log with what you are working on, just to check if what you're doing is working, cause if you save it (if you are using live server extension in Vscode), it will show on browser's console.

answered Nov 13 '22 at 10:25

Poro

11
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 16 '22 at 03:37

score 0 · Answer 2 · edited Nov 14 '22 at 22:34

0

Because NodeJS and Express are server-side, you can't run normal JS in a nodeJS file.

What you should do is take the normal JS code and put it in a separate JS file (i.e. script.js). Don't worry, you don't need to link the index.js to the HTML file. Just run node index.js in command line and the server will start up.

edited Nov 14 '22 at 22:34

Pawel Veselov

3,996
7
44
62

answered Nov 10 '22 at 22:55

Pekar Kids

3
2

I have tried that and the server works now. But how can I send ```email``` submitted on the frontend to the backend server to "store" it somewhere? – zach Nov 10 '22 at 23:01
for that you're gonna have to take a tutorial on MERN (mongo, express, node, react) stack. – Pekar Kids Nov 11 '22 at 12:07
So you can store it in your database (don't worry I don't know MERN either, wink ,wink) – Pekar Kids Nov 11 '22 at 12:09
thanks for the information! I did not know fullstack applications needed these components, I think that was what I am missing out on because I only did a course on Node.js and JavaScript – zach Nov 11 '22 at 13:51

Combining normal JavaScript with Node.js JavaScript in a Web Application

2 Answers2