Cannot read property 'addEventListener' of null

Question

```HTML Code
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit" id="submit" >
</form>
```
```JS Code
botton = document.getElementById("sizePicker");

botton.addEventListener('submit', function(event){
event.preventDefault();
var height = document.getElementById("inputHeight").value;
var width = document.getElementById("inputWidth").value;
makeGrid(height, width);
});
```
did I miss smth?
btw only with solo learn compilers I get an error
here is the full source code

https://github.com/AzerSD/pixelartmaker

Answer 1

I need to use the window.onload function because There's a difference between "immediately execute this when the parser encounters it" and "run this when the entire page has been loaded" (which is what onload does). Sometimes that difference doesn't matter, but sometimes it does - if you need to do things after images have been loaded, for example. 

Answer 2

adding window.onload would fix the problem

Answer 3

You need to use window.onload as you have done in your SL project 'Location and Population by IP'