Javascript animation won't work in IE

Question

I have a small javascript animation that shows a new dropdown select menu after the previous one has been chosen.

Heres the HTML:

<div class="steps">
    <div id="step1">
            <button type="button" class="button standardBtn" style="opacity: 1.5" id="toJapanese" onclick="setToJapanese(); activatePullDown()">To Japanese</button>
            <button type="button" class="button standardBtn" style="opacity: 1.5" id="toWestern" onclick="setToWestern(); activatePullDown()">To Western</button>
    </div>
    <div id="step2" style="opacity: 0"></div>
    <div id="step3" style="opacity: 0"></div>
    <div id="step4" style="opacity: 0"></div>
</div>

When a button from step1 is clicked, the first menu, step2, appears. When an item from step2 is selected, it moves to the left and a new menu, step3, shows. It works in every browser except IE (10 and 11). In IE, step2 moves over correctly, but step3 fails to show.

Heres my Javascript for when step2 is selected.

function yearSelected() {
    startMoveLeft('step3');
    getMonths();
    setTimeout(fadeIn, 600, 'step3', 'normal', 0);
}

function startMoveLeft(id) {
    var element = document.getElementById(id);

    var mq = window.matchMedia( "(min-width: 800px)" );

    var display = [];

    if (mq.matches) {
        display = 'inline-block';
    }
    else {
        display = 'block';
    }

    element.style.display = display;
    element.style.visibility = 'visible';
    element.style.width = '0px'; 

    doMoveLeft(element); 
}

function doMoveLeft(element) {
    console.log(element.style.width);
    if (parseInt(element.style.width, 10) < convertEmToPx(8)) {
        var width = parseInt(element.style.width) + 4 + 'px';
        element.style.width = width;
        setTimeout(function() {
            doMoveLeft(element);
        }, 1);
    }
}

function getMonths() {
    var xmlhttp = createXmlhttp();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('toJapanese').className += ' activeButton';
            document.getElementById('toWestern').className += ' unactiveButton';
            document.getElementById('step3').innerHTML = xmlhttp.responseText;
        }
    };

    var year = document.getElementById("yearSelect").value;
    var token = document.getElementsByTagName('input').item(name = "_token").value;
    var data = "_token=" + token + "&year=" + year;

    xmlhttp.open("POST", "ajax/getMonths", true);
    xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(data);
}

function fadeIn(id, time, fade) {
    var element = document.getElementById(id);
    if (element.style.opacity < 1) {
        FX.fadeIn(element, {
            duration: setDuration(time)
        }, fade);
    }
}

function setDuration(time) {
    if (time === 'very_fast') {
        return 200;
    }
    else if (time === 'fast') {
        return 400;
    }

    else if (time === 'normal') {
        return 600;
    }

    else if (time === 'slow') {
        return 800;
    }

    else if (time === 'very_slow') {
        return 1000;
    }

    else {
        return 0;
    }
}

(function() {
    var FX = {
        easing: {
            linear: function(progress) {
                return progress;
            },
            quadratic: function(progress) {
                return Math.pow(progress, 2);
            },
            swing: function(progress) {
                return 0.5 - Math.cos(progress * Math.PI) / 2;
            },
            circ: function(progress) {
                return 1 - Math.sin(Math.acos(progress));
            },
            back: function(progress, x) {
                return Math.pow(progress, 2) * ((x + 1) * progress - x);
            },
            bounce: function(progress) {
                for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
                    if (progress >= (7 - 4 * a) / 11) {
                        return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
                    }
                    return 0;
                }
            },
            elastic: function(progress, x) {
                return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress);
            }
        },
        animate: function(options) {
            var start = new Date();
            var id = setInterval(function() {
                var timePassed = new Date() - start;
                var progress = timePassed / options.duration;
                if (progress > 1) {
                    progress = 1;
                }
                options.progress = progress;
                var delta = options.delta(progress);
                options.step(delta);
                if (progress == 1) {
                    clearInterval(id);
                    options.complete;
                }
            }, options.delay || 10);
        },
        fadeOut: function(element, options, to) {
            if (to === undefined) {
                to = 1;
            }

            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to - delta;
                }
            });
        },
        fadeIn: function(element, options, to) {
            if (to === undefined) {
                to = 0;
            }
            if (element.style.opacity === 0) {
                to = 0;
            }
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to + delta;
                }
            });
        }
    };
    window.FX = FX;
})();

Ive tested these functions all individually and they work fine, but together something is not right. Id really appreciate some insight.

UPDATE: It has something to do with the AJAX request. Its not picking up the _token value. This line seems to be causing the problem:

document.getElementsByTagName('input').item(name = "_token").value;

Answer 1

The item function of HTMLCollection takes an integer argument (an index), not a CSS selector (you can't pass a selector like that, anyway). You probably meant to say this:

var token = document.querySelector("input[name='_token']").value;