cannot set DOM element to a variable

Question

I am trying to set a DOM element to a variable but when I console.log() the variable, it shows null.

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

but it is working perfect in the tutorial I'm following. Can anyone help me out?

If it is null it can't find the element. You are probably calling the code too soon, ie before the element is created — Patrick Evans, Oct 09 '17 at 17:32
There's nothing wrong with the code you shared so if you want a specific answer you'll probably need to share more. What does your HTML look like? Where is the script called? — Nathan K, Oct 09 '17 at 17:33
Provide a [mcve] so we can verify it. Nothing wrong with the code shown except not enough context provided — charlietfl, Oct 09 '17 at 17:33
@sumeetkumar He's not targeting a class or ID, but the element. — Nathan K, Oct 09 '17 at 17:35
Is 'canvas' a custom tag if it is true you should be got element. Can you share html code in here — Ferhat BAŞ, Oct 09 '17 at 17:37
@Niladri, ngOninit is an Angular called hook, nothing in the question has anything to do with Angular — Patrick Evans, Oct 09 '17 at 17:37

dhilt · Answer 1 · 2017-10-09T17:44:22.480

Due to specification, querySelector() returns null if no matches are found. So you have no canvas nodes in the moment you are trying to get it. You should

make sure that your html document has canvas node
make sure that you run your script after the canvas node is set to the html document

The following html code will work for sure

    <canvas id="myCanvas"></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        console.log(canvas);
    </script>

cannot set DOM element to a variable

1 Answers1