Why doesn't document.querySelector() function work with html5 code?

Question

Problem:

The canvas variable in my javascript does not appear to be detecting the canvas tag in my html document and I'm unable to detect the source of the problem.

Information:

I have the following code:

var canvas = document.querySelector('canvas');
console.log(canvas);

And ..

<!doctype HTML>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="./style.css">
      <script src="./code.js"></script>
      <title>Canvas Resize</title>
   </head><!-- head -->
   <body>
     <canvas></canvas>
   </body><!-- body -->
</html><!-- html -->

And ..

canvas {

  border: 1px solid black;
}

everything was tested with a " console.log("Hello World"); " in the js file and a " * { backgroud-color: blue; } " prior to proceeding with the code that is seen above.
Save and refresh have been applied faithfully

I have also done a test in which I replaced the variable's rvalue with a string constant. The value set to the variable was then displayed in the console of two browsers (Chrome and Firefox) - whereas null was rendered with the original rvalue code (ie: with " document.querySelector('canvas'); " as the rvalue).

Request:

Is anyone able to detect what is going wrong here? What am I missing?

A detailed description of the problem (with pictures) can also be seen here: https://i.stack.imgur.com/x5BIl.jpg

Your script is in the `` tag, which means it is run before the remainder of the html is parsed. So at the time the javascript executes, there is no canvas element yet. — CRice, Feb 01 '18 at 00:50
Thank you I wan't aware it made a difference (just starting to learn this). — Jacob Fines, Feb 01 '18 at 01:06

score 1 · Answer 1 · answered Feb 01 '18 at 01:05

Give the canvas a class and query it using document.getElementByClassName( Canvas Class Name)and run it through you console. If that doesn't work, then place the <script> tag at the bottom of the <body> tag to enable the browser load all the DOM objects before running your js code.

Why doesn't document.querySelector() function work with html5 code?

1 Answers1