Javascript className changes aren’t working

I have a small test page setup to test a sprite sheet I have. Each sprite in sprites.css looks like this…

.a320_0 {
   top: 0px;
   left: 0px;
   width: 60px;
   height: 64px;
   background: url("images/sprites.png") no-repeat -787px -398px;
}

My page looks like this…

var i = 0

function imageChange() {
  setTimeout(function() {
    var hdg = i * 15;
    document.getElementById('image').className = "a320_" + hdg;
    i++;
    if (i < 24) {
      imageChange();
    }
  }, 1000)
}
imageChange()
<div id='imageContainer'>
  <div id='image'></div>
</div>

I’m logging the class name during the loop and can see it changing and the names correspond to classes that exist in my style sheet. sprites.css and sprites.png are both in the images folder and the images folder is in the same directory as my page.

If I just copy one of the rules from my style sheet and put it directly onto my page and replace the name with #image for testing purposes I can display that particular image so my sprite coordinates are fine but if I do the same thing on my actual css file I don’t get the same result leading me to believe that my style sheet might not be loading. Even if I just put the styles directly into my document and try to use .className = , it still doesn’t work. I had this working recently but it doesn’t seem to be working anymore. I’m kind of lost here…

Answer

It should be document.getElementById("image").classList.add("a320_" + hdg);.

var i = 0;

function imageChange() {
  setTimeout(function() {
    var hdg = i * 15;
    document.getElementById("image").classList.add("a320_" + hdg);
    i++;
    if (i < 24) {
      imageChange();
    }
  }, 1000);
}

imageChange();
.a320_0 {
  top: 0px;
  left: 0px;
  width: 60px;
  height: 64px;
  background: url("https://source.unsplash.com/random") no-repeat -787px -398px;
}
<div id='imageContainer'>
  <div id='image'></div>
</div>

Codepen