ReferenceError: document is not defined in Visual Studio Code - javascript

Why wouldn't node.js recognize my index.html reference in the script.js file?
Pardon me for the dumb question but I couldn't find any fix and I've done copied perfectly a script from a YouTube tutorial and they seem to have no problem (neither do others, same method) but when I get to run node script.js in the terminal (or refreshing the html page in browser) nothing seems to work as it should and the html page remains static. I tried browsify and jsdom and what other suggested before in here but I wasted the same time with those too.
So here it is, even put it twice, once above </body> and once above </head>:
<script scr="script.js"defer></script>
...
<div class="countdown-days-c">
<p class="big-text"id="days">0</p>
<span>days</span>
</div>
And in the JS file like:
const daysElement = document.getElementById("days");
followed by this error
ReferenceError: document is not defined
at Object.<anonymous> (C:\Users\......\script.js:6:16)
at Module._compile...
and so on. Maybe I just missed something but I did exactly as shown and I've been struggling with this for some time now. I don't have any problem with the CSS file and the JS file can run perfectly standalone, but can't seem to work with the HTML.

You can't run the app in node because the global objects are different. What you should do is open the HTML file in the browser instead. That should solve all your problems.

Related

how can I fix files that are not showing in my local website?

I created a pokedex project with html css and javascript,when I try to open it with VSCODE it works fine,but when I try to open the html local file the broswer doesn't find 2 local files, it keeps saying that:
file:///C:/assets/js/poke-api.js net::ERR_FILE_NOT_FOUND
GET file:///C:/assets/js/main.js net::ERR_FILE_NOT_FOUND
the problem is that the files are working when I try to open in VSCODE.
https://github.com/joaogabriel1902/Pokedex-Challenge - in case someone likes to see the code.
I tried to uninstall some of the extensions that I have to see if would work.But nothing happened it keeps not finding the files.
I think the clue is in the error message
GET file:///C:/assets/js/poke-api.js net::ERR_FILE_NOT_FOUND
GET file:///C:/assets/js/main.js net::ERR_FILE_NOT_FOUND
You should not want your browser to be looking at C:/assets, unless you actually want to use the root folder of your hard disk, as your project folder (since "assets" is in the project folder itself).
Something has gone wrong in how you are telling the browser how to start the project. I suggest trying these steps.
Use Google Chrome
Drag the ".html" file from your explorer window, into the Google Chrome window.
That should trigger Chrome to open the HTML file in the right way.
How to access files in subfolders
Two ways seem to work for me:
<script src="./assets/js/main.js"></script>
or
<script src="assets/js/main.js"></script>
When I try a third way, however, I get an error message just like yours:
<script src="/assets/js/main.js"></script>
Attempt to fix
Your code does seem to be using one method that works on my system, so I am surprised that you are getting an error. However why don't you try the other method that works on my system, and see what happens?
Remove the ./ when accessing the Javascript files, by changing
<script src="./assets/js/main.js"></script>
to this
<script src="assets/js/main.js"></script>
Please let me know how you get on, because I am curious too.
Following way of code:
<script src="../assets/js/main.js"></script>

ReferenceError: document is not defined (atom ide) [duplicate]

I am learning JavaScript and I am using Atom (Text Editor).
On my HTML file I got only this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button id="displayTodosButton">Display Todos</button>
<button>Toggle Todos</button>
</body>
</html>
On my javascript file, I am simply trying to access the "Display todos" button using this:
var displayTodosButton = document.getElementById('displayTodosButton')
I was watching a video, and the instructor is using plnkr.co, and he accesses the button just fine, yet on Atom I get the "ReferenceError: document is not defined"
How can I fix this?
yet on Atom I get
If you really mean that Atom, your text editor, is highlighting it and showing you a warning that document is undefined, it's just that Atom doesn't realize you're running that code in a browser context where document will be defined.
It probably has a setting where you can tell it that you'll be running the code in a browser, so it can assume the default set of globals (window, document, etc.).
If the code in script.js is just what you've shown, although the error Atom is showing you won't be a problem (because in the browser, document will not be undefined), you'll get null back from getElementById because your code runs before the element exists. Again, this is assuming that code is on its own, not (say) inside a DOMContentLoaded handler or similar.
Unless you have a good reason to do it (and there aren't many), putting script elements in the head is an anti-pattern. Put them in body, right at the end, just prior to the closing </body> tag. That way, any elements defined above them will have been created by the browser before your code runs.
You have hit some menu option or key combination which is trying to execute the JS file using Node.js.
Your code, however, is designed to run, embedded in a web page, using the APIs supplied by web browsers.
Web browsers, under those circumstances, will provide a document object. Node.js will not.
You need to open the HTML document in a web browser. The open in browser extension might be useful.
You can see any error reports using the Developer Tools that every major browser supplies.
(NB: The first error you will then encounter is explained by this question and answer).
It looks like you are trying to run the JS code with the "script" package in atom (which is in a NodeJS context). What you actually want to do, is to run it in your web browser. So just open index.html in your favorite browser and see the magic :)

JQuery CDN not working, and local JS script not seen

I can't understand this for the life of me. I normally work with Python, but am trying to dabble a bit in web development with JQuery. I've used the CDN from google, and have done everything from putting the script below the footer (A site I found said that was the best spot), to moving it up into the header (every other site I've been to since says that is the best spot), and nothing works.
From the error in the inspection tools 'Loading failed for the with source “http://localhost:63342/HTML/Omnifood/resources/javascript/script.js”.' It suggests to me that it can't even find the .js file I created to hold my code, but it is there, defined. (See screenshots attached)
Any help getting this sorted out would be appreciated.
Screenshot of HTML and file structure, as well as error in inspection tool:
Edit: The issue has been resolved in so far as the folder has been moved to the correct location (/resources/javascript/script.js), I even went in and added type="text/javascript" to all the script files just in case. Now when attempting to run script with following JQuery code:
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
I get the following errors in inspection tool:
The path is wrong http://localhost:63342/HTML/Omnifood/resources/javascript/script.js
your script.js is at
http://localhost:63342/HTML/Omnifood/vendors/javascript/script.js

I keep getting a reference error saying the "document" is not defined [duplicate]

I am learning JavaScript and I am using Atom (Text Editor).
On my HTML file I got only this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button id="displayTodosButton">Display Todos</button>
<button>Toggle Todos</button>
</body>
</html>
On my javascript file, I am simply trying to access the "Display todos" button using this:
var displayTodosButton = document.getElementById('displayTodosButton')
I was watching a video, and the instructor is using plnkr.co, and he accesses the button just fine, yet on Atom I get the "ReferenceError: document is not defined"
How can I fix this?
yet on Atom I get
If you really mean that Atom, your text editor, is highlighting it and showing you a warning that document is undefined, it's just that Atom doesn't realize you're running that code in a browser context where document will be defined.
It probably has a setting where you can tell it that you'll be running the code in a browser, so it can assume the default set of globals (window, document, etc.).
If the code in script.js is just what you've shown, although the error Atom is showing you won't be a problem (because in the browser, document will not be undefined), you'll get null back from getElementById because your code runs before the element exists. Again, this is assuming that code is on its own, not (say) inside a DOMContentLoaded handler or similar.
Unless you have a good reason to do it (and there aren't many), putting script elements in the head is an anti-pattern. Put them in body, right at the end, just prior to the closing </body> tag. That way, any elements defined above them will have been created by the browser before your code runs.
You have hit some menu option or key combination which is trying to execute the JS file using Node.js.
Your code, however, is designed to run, embedded in a web page, using the APIs supplied by web browsers.
Web browsers, under those circumstances, will provide a document object. Node.js will not.
You need to open the HTML document in a web browser. The open in browser extension might be useful.
You can see any error reports using the Developer Tools that every major browser supplies.
(NB: The first error you will then encounter is explained by this question and answer).
It looks like you are trying to run the JS code with the "script" package in atom (which is in a NodeJS context). What you actually want to do, is to run it in your web browser. So just open index.html in your favorite browser and see the magic :)

Why the copied HTML doesn't look like the original HTML?

I copied the generated source code (View Source -> View Generated Source in the Firefox Web Developer Toolbar) of Google's Keyword Tool page to a new HTML file.
But, when I open this new file, some of the items looks stretched for some reason:
The original website looks like this:
I guess that Google create some elements and set various attributes using Javascript, but I copied the page after it has been generated. So, why is this difference?
UPDATE 1
The only JS/CSS file, which is not given as a full path, is:
<script language="javascript" src="/cues/cues.js">
I tried replace this with:
<script language="javascript">
Contents of '/cues/cues.js' here
</script>
but it didn't help.
UPDATE 2
In the browser's error console I found the following 2 errors:
Error: com_google_ads_apps_servers_cues_CuesRelease is not defined
Source File: https://adwords.google.com/cues/768DAEDDB2193AB5B05B9C6A01394D78.cache.js
Line: 1
Error: com_google_ads_apps_targetingideas_client_TargetingIdeas is not defined
Source File: https://adwords.google.com/o/Targeting/756D6AF3BB4DD4A68315E34F50C2BC7E.cache.js
Line: 1
Any ideas why these errors appear?
UPDATE 3
Apparently, the reason is that the DOCTYPE declaration is missing. After I added <!DOCTYPE html> to the stretched version, it solved the problem. Can anyone explain why?
When you save a page, you only get the version of HTML served from the server in its original form. Any mods to the DOM made after load using JS will not be part of the save.
EDIT
I could not trace out the exact reason for the error as the code is really cryptic! In any case, if all you want is to be able to reproduce the exact page offline, then you can do a 'save page as..' from your browser (choose web page, complete). I tried this with FF as well as Chrome and it is working fine in both cases. While opening the saved page, it might be best not to use IE as its a certified choker when it comes to even the slightest error in code. :)
The most likely reason for the error is an cross-domain AJAX security exception (fired when the calling client side script and called server side script are from different domains). The 2 variables namely, com_google_ads_apps_servers_cues_CuesRelease and com_google_ads_apps_targetingideas_client_TargetingIdeas seems to be initialized using the return of some AJAX call (which couldn't execute bcoz of the secu excep), and as a result remain as undefined.
You must be missing some css and js which is not on the page but referred from somewhere else.
The most probable reason is that the CSS and the corresponding images that might be referred within it are not getting applied correctly.
Check the paths of the CSS and for the images (background) within the CSS...You might need to correct the paths to fix the issue.

Categories