TypeError: Document.getElementById(...) Is Null Django + JS

I'm having an error while executing the following code: var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies', 'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham'

Solution 1:

Your javascript file is running before the button exists in the DOM, so it can not find it

wrapper your code with use window.onload

whenever you access a DOM element, it must already be rendered

Solution 2:

Perform a null checker

let button = document.getElementById('id');

if(typeof button !== 'undefined' && button !== null) {
  button.onclick = () => { /* Do your stuff */ };
}

Solution 3:

Button's type="submit" must be eliminated if you want to add listener.