"ReferenceError: document is not defined" while using WebStorm

Question

I am using WebStorm IDE and I'm writing a simple test for my HTML and JS. Here's the code:

JavaScript (index.js):

const cool = document.getElementByClassName('error');

cool.innerText = 'test';

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "index.js"></script>
</head>
<body>
    <h1 class="theWhat">The DOM</h1>
    <p>Hello World</p>
    <p class="error">Error!</p>
</body>
</html>

The JavaScript does nothing to any of the 'p' tags and when I run it in it of itself, I et this error:

const pars = document.querySelectorAll('p'); ^ ReferenceError: document is not defined at Object. (C:\Users\sethz\WebstormProjects\jscourse\chapter2\index.js:124:14)

←[90m at Module._compile (node:internal/modules/cjs/loader:1101:14)←[39m

←[90m at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)←[39m

←[90m at Module.load (node:internal/modules/cjs/loader:981:32)←[39m

←[90m at Function.Module._load (node:internal/modules/cjs/loader:822:12)←[39m

←[90m at Function.executeUserEntryPoint as runMain←[39m

←[90m at node:internal/main/run_main_module:17:47←[39m

Process finished with exit code 1

Ive read it has to do with the interpreter, but I have no idea how to fix that.

NOTE:

I'm using Node.js. I've nevr had this problem before until I deleted it in order to update to the most recent WebStorm (2021)

apart from that error - the code is wrong anyway .. .since pars is a NodeList (an Array like object) - so, trying to use it as if it were an Element won't work — Bravo
– Bravo, Commented Aug 10, 2021 at 17:22
@ssethzz document object is works on browser javascript. Node js run time environment is different from browser javascript. — Pranavan
– Pranavan, Commented Aug 10, 2021 at 17:35
@ssethzz - wha? well, I guess now cool is a NodeList ... the name of the variable doesn't matter, the content is the problem -anyway, that isn't your issue, your issue is you're apparently trying to execute a web page using nodejs - I think you need to step back and realise that a webpage is displayed on a browser - and that your "code" is HTML (with a script in it), not javascript ( — Bravo
– Bravo, Commented Aug 10, 2021 at 17:37
You have multiple issues, First: <script src = index.js></script> is missing qouts, it should become: <script src="index.js"></script> add to that your javascript is being executed before the dom is loaded, and when using document.querySelectorAll() it'll return a NodeList which you need to loop through its elements to change them one by one: const pars = document.querySelectorAll('p'); pars.forEach(el => el.innerHTML = "test"); — Abd Elbeltaji
– Abd Elbeltaji, Commented Aug 10, 2021 at 18:10

Pranavan · Accepted Answer · 2021-08-11 02:15:41Z

0

To include a javascript file to a html page you need to declare static directory in your index.js/ app.js.

const express = require('express');
const app = express();
app.use(express.static('public')) // static file
app.listen(8000, console.log(`Server started on port 8000`))

We declared 'public' folder in root as static file folder. Then if you have a public/index.js (For browser) in public folder, add it to your html page as usual

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

Note that, you don't need to specify the public folder when using the static file in browser.

answered Aug 11, 2021 at 2:15

Pranavan

1,5451 gold badge10 silver badges20 bronze badges

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

Comments

ssethzz · Accepted Answer · 2021-08-11 16:58:48Z

0

I appreciate all the help guys. I've used some answers and some worked. I have found another way to do this without the extra code as well. I went to the website http://vanilla-js.com/ which downloads a script file that includes DOM manipulation. All I have to do is refractor it and change its name to my liking in my IDE (WebStorm).

answered Aug 11, 2021 at 16:58

ssethzz

435 bronze badges

Collectives™ on Stack Overflow

"ReferenceError: document is not defined" while using WebStorm

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related