12

Making an Index Using Javascript

Working with a faculty member we had a rather long page that was originally written in Google Docs. It had many sections that were (mostly) designated by H tags of various denominations. The goal was to and put it on a website quickly build an index of anchor links. I did not wish to do the index portion by hand. With javascript things like this are relatively pleasant. You can see the whole thing in this codepen but I’ll break it down a bit below. First we can get all the H tags with querySelectorAll. I can console.log(headers) and I’ll see a NodeList of all the headers it found. I tend to work console.log all my variables as I go just to make sure it’s really happening the way I think it is. My next move is to add an id to each of these headers so that we can navigate to them via anchor links. with this forEach loop each header will get an id of header-whatever number we’re on in the loop. Now that I have headers that I can link to as anchor links, I need to build the index and put it somewhere. In this case it was easy for me to add a div to the source manually so I did. That will be where […]