Discussion on: A (Very) Beginner's Guide to WEBPACK

Uh-oh.** Remember that thing I said in the beginning about scripts executing in order? The defer attribute tells your browser not to run a specific JavaScript file until after the HTML file is done loading. Without defer, your JavaScript executes as soon as the HTML loads. And if the code in your 'main.js' file runs before the code in 'game.js', your program will try to run your 'click()' function before it's been defined. Which is why you now have an error in your console.

The Error is because the button is undefined right? not because of the order of loading the .js files.

const button = document.getElementById("button");

console.log("Supposed to be button => ", button);// Supposed to be button =>  null

button.addEventListener("click", function () {
  click();
});