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
– Dave Pritlove, Commented Nov 10, 2022 at 22:34
There's a discussion that might help here: stackoverflow.com/questions/24647839/… — Dave Pritlove
– Dave Pritlove, Commented Nov 10, 2022 at 22:36
I have added the error message as part of the question - thank you! — zach
– zach, Commented Nov 10, 2022 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
– code, Commented Nov 11, 2022 at 0:02

Poro · Accepted Answer · 2022-11-13 10:25:29Z

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, 2022 at 10:25

Poro

111 bronze badge

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

1 Comment

Community Over a year ago

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.

Pawel Veselov · Accepted Answer · 2022-11-14 22:34:39Z

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, 2022 at 22:34

Pawel Veselov

4,2738 gold badges49 silver badges71 bronze badges

answered Nov 10, 2022 at 22:55

Pekar Kids

31 silver badge3 bronze badges

4 Comments

zach Over a year ago

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?

Pekar Kids Over a year ago

for that you're gonna have to take a tutorial on MERN (mongo, express, node, react) stack.

Pekar Kids Over a year ago

So you can store it in your database (don't worry I don't know MERN either, wink ,wink)

zach Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related