Why this code is showing getContext () is error

Question

It is showing cannot read getContext () of null .
https://code.sololearn.com/W6mrXACbXQi9/?ref=app

Answer 1

https://www.sololearn.com/post/90825/?ref=app

Answer 2

On sololearn, code written in javascript tab runs before the code in HTML tab.

As a result JS tries to access HTML DOM before it exists. As DOM is not ready `document.querySelctor` returns `null`.

You can try this solution,
Wrap code within a callback function to `load` event as below :

window.addEventListener('load',function(){
//code here.
});

Or, assign a function to `window.onload` property:

window.onload=function(){
//code here
};

There is also third way. Write in script tag below body tag

.
.
.
</body>
<script>
//code here
</script>
.
.
.

But I'll suggest don't use this last method.You'll not get code highlighting. First method is best.

Answer 3

🎶💞Sravs💞🥀 , Have you read the post that I linked in previous answer?

Answer 4

Could you explain clearly, where I have did mistake..

Answer 5

Yes,but I am confusing

Answer 6

Tq