getElementByClassName gives empty array but chrome console gives all elements

Question

I am trying to get all the elements with class name "game-image" and put it into an array so I can loop through it. In my javascript file I have the following:

var gameImages = document.getElementsByClassName("game-image");
console.log(gameImages.length)
console.log(gameImages)

And I have multiple images on my HTML file like this(yes pokemon)

<img class="game-image" id="bulbasaur" src="images/pokeball.jpg">

Now when I check dev tools console on chrome, the console displays 0 for length and [] for gameImages. But when I type console.log(gameImages) into the console, I get the array I was trying to get. Anyone know why?

This same code worked on one of my other projects but not this one.