Exploring the code, here were some of the key sections:
// there were sections like this const filterOption = document.querySelector(".filter-todo"); const clearButton = document.querySelector(".clear-button"); // then more code // then some of this filterOption.addEventListener("click", filterTodo); clearButton.addEventListener("click", clearTodos); // and more code
I just pulled out the lines relevant to what he was doing and to the error so be aware that it's all out of context.
document.querySelector lines get references to DOM elements -
elements on the page. The
addEventListener then links a function to
the event. So, when you click on the clear button on the web site,
it's supposed to run the function
clearTodos and when you click on
the filter button it will run fiterTodo. There's more linking of
events to elements in the code.
What was really weird was that parts and in fact most of the interface was working and just the clear button was not. To make matters worse, looking both at the server output and the actual web page, there was no indication of anything wrong. Even if you looked at the developers console in the browser it didn't really give you a clue.
What was going on?
querySelector it returns a reference to an
element in the web page. If that element doesn't exist, it returns
null. As it turned out, at least in the version I looked at, there
was no element on the page identified by the class filter-todo. The
result was that after executing
const filterOption = document.querySelector(".filter-todo");
filterOption is set to refer to null.
Then later, this code:
crashes the program because you can't call the
null which is what
filterOption is set to.
Therein lies the problem. I commented out the two lines, the program ran, and the clear button was clickable.
The killer was that the tool gave some pretty weird results - it wasn't all or nothing. Parts of the interface responded but parts didn't. There was no actionable feedback. The only feedback was indeed this error: TypeError: filterOption is null but this seems wholly unrelated to the clear button and since most of the interface was responsive it seemed even weirder.
My best guess was that the web browser executed the JS code until the crash so anything that parts of the user interface that were wired up prior to that null pointer reference did indeed run.
This was all just a reminder that tools matter. Java, Python, and C++ might not give the best error messages but generally the tooling isn't so bad. They could of course, be better, and I'm not arguing that any of them are ideal learning environments but JS has a long way to go. On the other hand, languages and environment specifically made for learning have issues as well. The bottom line in choice of tools is that there's no magic bullet and the answer is as usual, "it depends."