Program works Everywhere but Sololearn

Question

It works on my machine lol
But seriously, why does my code work on chrome and the internet but not on sololearn code playground. I don't understand why it doesnt understand my Event listener

https://code.sololearn.com/WL556Oa51R7D/#js

Answer 1

Sololearn's code playground includes the JS part in too early, before your html body is even loaded and so your query selector returns a falsy result (implying it will crash on the event listener).
What you can do for instance is enclosing the whole JS part by
window.onload = function(){
<your code>
}

Answer 2

It's a very common error noob gets here.
Now just try to understand your errors.
It's saying "Uncought TypeError: Cannot read property 'addEventListener' of null on line 3".
Goto line 3 in your js code and you find
"calculate.addEventListener('click..." and according to the error, it seems that 'calculate' is null!
Now check where are you getting this 'calculate' from so it's actually a button you're storing in 'calculate' and since the calculate is null means it can't find the button inside your HTML code.
That's it for the error.

Now, it happens coz the js part gets loaded before the html part gets and so it can't find it's elements. All you need is to wrap your entire code inside a function which will be called after the html window get loaded.
Here's how you can do this...

window.onload= function(){
//your entire JS code goes here
}

Answer 3

Lo que dijo カンタンジャヌエル