Why can't I access elements in an HTML collection on the NYT crossword page?

Question

I'm trying to write a Chrome extension that adds "previous puzzle" and "next puzzle" buttons to the toolbar on a New York Times Crossword page. I hate having to navigate back to the crossword archive to find another puzzle and can't believe they don't include this in the toolbar.

My plan is to inject two additional li tags with buttons on the toolbar, to sit next to the existing Rebus and Reset buttons. I have all the HTML figured out that I want to inject, but I can't seem to get the ul bound to a javascript variable for me to edit the innerHTML.

I thought this would be a simple 10-15 line javascript, 30 minute project. Whoops.

For example, if you navigate to:

https://www.nytimes.com/crosswords/game/daily/

or if you don't have a Times account:

https://www.nytimes.com/crosswords/game/mini/

I can retrieve an HTMLCollection of the toolbar by writing:

var toolbar = document.getElementsByClassName('xwd__toolbar--tools'); //returns an HTMLCollection with the ul as the 0th element.

But if I try to actually access the ul in the 0th element, it's returning undefined and I've been beating my head against a wall trying to figure out why.

var requiredElement = document.getElementsByClassName('xwd__toolbar--tools')[0]; //returns undefined

What undoubtedly obvious javascript thing am I missing here?

Answer 1

Probable cause:

You are looking at the return value of the assignment.

After navigating to https://www.nytimes.com/crosswords/game/mini/ and executing var requiredElement = document.getElementsByClassName('xwd__toolbar--tools')[0]; in the developer console of my browser sure enough i get undefined:

Even though this says undefined there is a value stored inside requiredElement which will be displayed in the developer console if i tell it to evaluate its value:

Here is an interesting answer with some more details: https://stackoverflow.com/a/22844864