Question

Can’t quite figure this out. In Firefox, (only tested it in Firefox), this code creates 8 inputs and 8 buttons. I think it should only create one. Need some help on this one.

var replacefiles = function(){
    var inputs = document.getElementsByTagName('input');
    var length = inputs.length // prevent infinite loop
    for (var x = 0; x < length; x++){
        var type = inputs[x].getAttribute('type');
        if (type === 'file'){
            var file = inputs[x];
            var parent = file.parentNode;
            var input = document.createElement('input');
            var button = document.createElement('button');
            parent.insertBefore(input, file);
            parent.insertBefore(button, file);
        }
    }
}

Answer 1

getElementsByTagName returns a live view of the results.

When you insert a new <input> before the current one, the current gets shifted over, so inputs[i + 1] now points to the same <input type="file">.

You need to copy the results into a normal array by writing

inputs = Array.prototype.slice.call(inputs);