CODEWITHSUNDEEP
javascript
RainbowHell
RainbowHell

Reputation: 23

How do I use Document Object Model (DOM) in VScode?

I was following this tutorial to make a game in JavaScript that runs on a browser. This tutorial was working in CodeSandBox but I want to try it in VScode.

Link: https://www.youtube.com/watch?v=3EMxBkqC4z0&t=329s

A line of code is shown in 2:40 and it only works in CodeSandBox, but not VScode.

// index.js
let canvas = document.getElementById("gameScreen");

It pops out

"ReferenceError: document is not defined"

and it seems I need some extensions to make JS DOM works in VScode. What extensions should I install to make it work? The HTML file is just a plain file with a JS script being called.

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1 class="style1">Block Game</h1>
    <canvas id="gameScreen" width="800" height="600"></canvas>
    <script type="module" src="src/index.js" ></script>
  </body>
</html>

Upvotes: 2

Views: 5261

Answers (4)

Poro
Poro

Reputation: 11

just don't use console log in VSCode. It clearly can't work, since it's a server environment. Just use your browser console (F12, then click console), it will definitely work there. You can use console.log to check if a part of what your are working on is working, because it will show on your browser's console.

I've been dealing with this problem for a while but what I think what I said is the answer.

Super late but I hope this helps.

Upvotes: 0

Pavle Ilic
Pavle Ilic

Reputation: 25

I suggest you to instal Live Server Extension on the left side in VScode. And then you will have a 'Go Live' text on bottoom right corner, so with that you can open your file on 'real' server.

Then use:

let context = canvas.getContext('2d');

And then you will have all canvas methods, like fillRect, fillText, globalAlpha etc...

Upvotes: 0

codeandcloud
codeandcloud

Reputation: 55200

Your js file is not of type="module". Remove that

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

PS: If the index.js and index.html, you can access it like src="./index.js" too

Upvotes: -1

Quentin
Quentin

Reputation: 943220

You can't run JS in VS Code.

(OK, you can, because you can write extensions to VS Code in JavaScript, but that isn't your goal).

VS Code is an IDE. It's primary function is to edit code.

If you want to run JavaScript you need to load it in a tool which can run it. Most commonly this will be either by:

  • Executing the JS with Node.js
  • Opening an HTML document containing a <script> element in a web browser.

JavaScript programs are usually designed to run in one or the other, but not both. (Utility modules are often designed to run in both).

You have an HTML document. It has a <script> element. The JS tries to access the document object which is provided by web browsers but not by Node.js.

Don't try to open it using Node.js. Don't click a button in VS Code designed to open the JS with Node.js.

You can install the Live Server extension to provide an option to run an HTTP server for your project, open a browser, and point it at your project.

Upvotes: 2

Related Questions