They were, and while it may not be obvious right now, you’re more than prepared to take the next step.
What’s the DOM?
Note: Event listeners is the technical term for all the fun things that make sites interactive. Clicking an image to expand, filtering and sorting options, and submitting information all fall under this category.
Separate Your Functions!
At the start, your code will feel gigantic. That’s because it’s huge. (It is. Accept it.) This is normal when you’re trying to grasp all of the things you’ll need to do, but don’t let this hinder you. If you can, pseudocode your answer first, take a step back and make sure everything works, then go ahead and start refactoring. This isn’t a new process, and you’re probably familiar with it after working with Ruby, but it’s easy to feel like this is impossible when you’re looking at twenty lines of code that accomplish a single task. Take a deep breath, and start moving things around.
Debugger is Your Best Friend (Console.Log is a Close Second)
You’ll be able to test in the console using all of the available functions and variables that you’ve declared. If you’re not really in the mood for testing, you can use console.log() instead.
This will simply print some message of your choosing to the console for you as confirmation that things are at least running. These are invaluable when using Event Listeners, as they allow you to confirm that your listener is working properly before adding any conditional statements/logic.
Better Explained By Seasoned Professionals
Introduction to the DOM
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a…