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

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 :)

Related

ReferenceError: document is not defined in Visual Studio Code

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.

Unable to print "hello world" message using javascript on my computer

I cannot print a helloworld message using Javascript in my HTML document. Let me explain my problem from beginning to end one-by-one.
I'm using the latest version of Microsoft Edge as my default web browser.
Using a simple notepad, I just created a simple HTML document named chandan.htm and saved it to my hard disk.
I also included the script tag in the body of the HTML document in an intent to print the "hello world" message in java script code.
I share the simple HTML code, in which a simple Javascript code is embedded to print the "hello world" message:
<!DOCTYPE html>
<html>
<head>
<title> hello chandan how are you and what are you doing</title>
</head>
<body>
<script>
document.write("hello world ! ");
</script>
<h1>politics</h1>
</body>
</html>
When I run the HTML document in my Microsoft Edge browser, I cannot see the "hello world" message, that I have specified to print on the HTML document inside the script tag. I also gave a try by running this HTML document in Google Chrome and Internet Explorer hoping that it would print the "hello world" message once on the browser, but this thing did not happen at all. Instead, I could see only the HTML code, such as the text of the title, and the text of the heading tag of the HTML document; not "hello world" message from Javascript.
Before the date of May 30, 2020, everything was fine. The instructions of the Javascript, which were specified within the script tag of HTML document, were executed properly. I was able to print the "hello world" message using the Javascript command document.write("..."). I could also see the "hello world" message directly on the screen. but after the date 30th May, 2020, I could not execute any Javascript code in any of my browser. 5-6 days after, when I tried to print the same "hello world" message again on my browser, the code was not executed and I cannot see the "hello world" message on my screen. could you resolve this problem?
I also tried to debug this problem at my level. What I double-clicked on the "chandan.htm" document, which opened the document in Edge, which is my default web browser. when I did not see the "hello world" message, I simply pressed "CONTROL-Shift-i" to open the console window. On the console prompt window, when I typed document.write("hello world") and pressed "enter", then the console prints "undefined". That's it. so please help me to solve this problem soon.
When you save a file in notepad, .txt is automatically appended to it and you can't see the extension due to file explorer's default settings. At the bottom of the save dialog, there should be a dropdown with the label "Save as type", and you want to click it and select "All files (*.*)", so .txt isn't automatically appended to it. Then, when you open it, it should appear as html and not as text.
The problem is most people don't have the basics covered. The full working example is posted below though I'm going to make some clarifications first.
There are separate parsers (software that takes code and determines what to do with it) for HTML and XML. I use the XML parser with HTML5 code so I gain the benefit of the latest technology with the much stricter XML parser. I've seen someone waste three days trying to figure out why Safari wouldn't properly style while all other browsers worked fine; he discovered he was missing a quote on an attribute. Using the XML parser the page immediately breaks and you get an error message.
The XML parser works best in Gecko browsers such as Waterfox and Firefox. Other browsers render up to an error in the code.
Stricter code might seem more difficult though it's been a massive boon for me. All the stuff I had to figure out has long been well documented presuming you know how to ask the questions you'll naturally encounter.
Even if you use the HTML parser you should never use document.write or innerHTML as they're proprietary and really buggy. Those who disagree do not test browsers properly.
Never put script elements in the body element, it leads to weak code that breaks easy.
Use the defer="true" attribute/value on script elements in the head as this will require the HTML/XML to finish loading instead of executing a script before some of the expected HTML appears.
Spend time familiarizing yourself with JavaScript (and HTML/CSS) functions and methods to get an idea of how much is available to work with.
Avoid frameworks and libraries and use normal pure JavaScript. You will save yourself vast amounts of frustration once you have the experience.
Use Notepadd++ to edit files, Notepad in Windows adds a BOM (Byte Order Mark) that causes havoc with XML parsers and other aspects of code. Plus you can theme and get nifty things like bracket highlighting.
example.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
if (confirm('Would you like to add some text to the paragraph?'))
{
document.getElementById('example1').textContent = 'Hello World!';
}
}
//]]>
</script>
<style type="text/css">
</style>
</head>
<body>
<p id="example1"></p>
</body>
</html>

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 :)

How can I tell which Javascript module created an element/table on a webpage?

I started working at a place that has a huge webpage app built already. I have been hired to do front-end testing with Selenium, but I'm curious to see the inner workings of the app. My question is, with Chrome dev tools or something similar, how can I tell what Javascript module created an element / table / form that I am seeing on the page? I can 'inspect element' and look at the DOM, but I want to know which .js file to dig into to to see how the element was built.
In essence, in Chrome dev tools, how do I bridge the gap between the DOM inspector and the Source files that built the DOM.
I made a Chrome Extension that let's you inspect a page and see the relevant JavaScript code for each DOM element. It's still very flaky, but might be worth giving it a try.
It's based in part on the approach Pranay has suggested.
creating DOM elements can be done by setting the innerHTML of any DOM element or calling appendChild method. So proxy these two using JavaScript Proxy. To know the location you can chrome console method console.trace();
Ex:
Suppose you have this HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div></div>
</body>
</html>
your proxy should be like this
var divEl = document.querySelector('div');
divEl.appendChild = new Proxy(divEl.appendChild, {
apply: function(target, thisArg, argumentsList) {
console.trace();
target.apply(thisArg, argumentsList);
}
});
some where in the code if following code is executed
var pEl = document.createElement('p');
divEl.appendChild(pEl);
you can see from where it is called in the console.

Execute browser page/javascript from a script/command-line

Hope this isnt a stupid question.
I have recently had an idea about something which I am very curious about.
I am a fan of Node.js (not really relevent here I think) and the V8 engine but I was wondering if its possible to run a browser (get it to execute JS) but INTERNALLY.
What I mean by that is to create a program (possibly using the V8 engine) which can open a page (as if in the browser) and execute its javascript.
For instance say I have the below file hosted on www.mysite.co.uk/home.php
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
//javascript AJAX call to www.mysite.co.uk/ping.php
}
myFunction();
</script>
</head>
<body>
</body>
</html>
And ping.php looks something like:
<?php
//connect mysql, database ping and table ping
//it is a single column table with integer value starting on 0
//increment by 1 and update the table
Say I wanted to get the Javascript to execute by using some sort of script on my command line/linux box (essentially WITHOUT using a browser).
So something like:
./mybrowser http://www.mysite.co.uk/home.php
or even:
./mybrowser home.php
I feel like it should be possible as the V8 (or different JS engine) should technically be able to execute Javascript but I havnt the foggiest how it could do so out of a browser context (or even if its possible).
Any ideas?
You can use any js engine to run js scripts as long as they do not rely on the DOM.
You could start by looking at:
Running V8 Javascript Engine Standalone
Edit: as I understand you want a headless browser, here are some:
HTMLUnit (I use that one for unit testing)
PhantomJS
Zombie.js
Running JavaScript on the command line by using either Rhino for Java or Windows Script Host.
http://www.mozilla.org/rhino/
http://msdn.microsoft.com/en-us/library/9bbdkx3k%28VS.85%29.aspx

Categories