XMLHttpRequest.onreadystatechange - FireFox vs IE

Hello, all,

I'm posting this question here because I don't have an account on any other forums, and I don't know where else to go.

I have a .cfm page that is using Javascript XHR to post a single word value to itself which will determine how something is going to be processed.

PSEUDOCODE:

<div class="thisNav" id="getStats">Get User Stats</div><div class="thisNav" id="pruStats">Prune Stats (6 mos)</div><div class="thisNav" id="expStats">Export User Stats</div>
<script>
     var thisNav = [].slice.call(document.getElementsByClassName('thisNav')).map(function(d){
          d.onclick = function(event){getThis(d.id);};
          });
     xhr = new XMLHttpRequest();
     function getThis(act){
          xhr.open("POST","filename.cfm",true);
          xhr.setRequestHeader("Content-Type","x-www-form-urlencoded");
          xhr.onreadystatechange = function(){
               if(xhr.readyState*1 === 1){anotherDiv.innerHTML = " OPENING";}
               elseif(xhr.readyState*1 === 3){anotherDiv.innerHTML = " DISPLAYING";}
               elseif(xhr.readyState*1 === 4 && xhr.status === 200){anotherDiv.innerHTML = xhr.responseText;}
               }
          xhr.send("act=" + act);
          }
</script>

Now, in Internet Explorer 11, this works well (I know, I can't believe it, either.)

However, in FireFox 52, this will only display the last stage (xhr.responseText) on the first click (will not see readyState 1 or 3).  Subsequent clicks (if I don't refresh the page) will work as expected, but the initial click will not.

What is the difference between FF and IE that could cause this??  Is there some kind of fix or workaround??

V/r,

^_^