ReferenceError: document is not defined | SpeakJS | Page 1

fiery ravine Mar 19, 2024, 6:41 PM

#

Hello, I am a complete beginner to js/html/css and I have no idea what I'm doing. I don't really understand what node.js is but I got it because I was having problems running js at all without it. I use vscode.

I'm trying to make a separate file for all my javascript, and am linking it to my html via:
<script src="script.js"></script>

and I am visualizing my html + css with the vscode liverserver extension, however, when I try to run my js file I get ReferenceError: document is not defined

(the code is only trying to grab an html element so far: var originalLine = document.getElementById("line-0");)

I tried googling and stack overflow, but I don't understand what they're talking about in the image I attached.

How do I get my javascript file to recognize the html document and its elements? I think it has to do with nodejs but like I said before, complete beginner I have no clue what anything is or what's happening.
If anyone could help me out I'd seriously appreciate it 🙏

brittle river Mar 19, 2024, 6:44 PM

#

show your code. if you're using <script> tags, you don't need node

#

node is a JS environment. browsers are another JS environment. each have their own APIs but can both run JS.

coral stone Mar 19, 2024, 6:45 PM

#

Mandatory #faq message to learn modern web dev

brittle river Mar 19, 2024, 6:45 PM

#

document is an API provided by browsers. it's not included in node by default.

fiery ravine Mar 19, 2024, 6:47 PM

#

brittle river Mar 19, 2024, 6:48 PM

#

that's not live server, that's node

#

why are you running this in node?

fiery ravine Mar 19, 2024, 6:48 PM

#

oh what

#

how do I

#

not run it in node

brittle river Mar 19, 2024, 6:48 PM

#

fiery ravine Mar 19, 2024, 6:48 PM

#

sorry I had no idea

coral stone Mar 19, 2024, 6:48 PM

#

also lots of ew, I would suggest learning modern before continuing with your adventure 😁

fiery ravine Mar 19, 2024, 6:50 PM

#

lmaoo, I'll look into that, thank you guys

#

wait no sorry I think I'm blind..where is this go live button 😭

#

I've been right clicking and opening

coral stone Mar 19, 2024, 6:52 PM

#

https://phoenix35.js.org/good-practices.html#correct-use-of-js-in-the-browser

fiery ravine Mar 19, 2024, 6:52 PM

#

brittle river Mar 19, 2024, 6:54 PM

#

the "go live" should be in the bottom-right corner of the window, if you installed: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

#

you would also open the HTML with live server, not the JS script

fiery ravine Mar 19, 2024, 6:57 PM

#

coral stone https://phoenix35.js.org/good-practices.html#correct-use-of-js-in-the-browser

<script type=module src="script.js"></script> is this all I was supposed to change here?

coral stone Mar 19, 2024, 6:57 PM

#

No, but it's a first step into good practices

fiery ravine Mar 19, 2024, 6:58 PM

#

brittle river the "go live" should be in the bottom-right corner of the window, if you install...

and, this is all I see RUN it might be so obvious but I don't see it

#

the html page is open right now

brittle river Mar 19, 2024, 6:58 PM

#

that extension is installed?

fiery ravine Mar 19, 2024, 6:59 PM

#

yes

brittle river Mar 19, 2024, 7:00 PM

#

in settings?

fiery ravine Mar 19, 2024, 7:01 PM

#

yes that's checked in my settings as well

brittle river Mar 19, 2024, 7:02 PM

#

no clue. restart vscode or something

fiery ravine Mar 19, 2024, 7:02 PM

#

🫡 will do

brittle river Mar 19, 2024, 7:02 PM

#

fiery ravine

this should work too

fiery ravine Mar 19, 2024, 7:10 PM

#

oh lord okay I got it working now, thank you

#

haha omg I was way overcomplicating this entire thing, I just realized that the js is running automatically- don't need to run it in vscode or node at all

#ReferenceError: document is not defined