open file dialog trouble

[wayfinder]

Hi!

 

I have a function that opens a file dialog, lets me choose a file from my hd, and then loads the contents as JSON data into an object. So far, so good: all the individual elements work. But there's a problem: I can't seem to get it right so that I can read the file name from the file dialog correctly, unless I pause the program in dev tools, and I'm just terribly confused.

 

This is the code:

   loadFile: function() {        var file, fr;                var input = document.createElement("INPUT");        input.setAttribute("type", "file");        document.body.appendChild(input);        input.click();// here comes the problematic bit        for (var i = 0; i < 1e7; i++) {            if (input.files.length == 1) break;        }         // here ends the problematic bit        file = input.files[0]; // this is the line that I only want executed after i have chosen a file name in the file dialog        fr = new FileReader();        fr.onload = receivedText;        fr.readAsText(file);        document.body.removeChild(input);        function receivedText(e) {            lines = e.target.result;            var newArr = JSON.parse(lines);        }    },

I've put some comments in there. What happens is that the statement in the for loop is never evaluated. And it makes sense, too, since the loading can't take place while the CPU is counting up i. But how do I make sure that the next line is only executed after I'm sure that I've chosen a file in the dialog (i.e. that input.files[0] exists)?

[wayfinder]

So, with the help of a few friends on twitter this got solved, if anybody else ever runs into the problem, this is what I changed:

 

    loadFile: function() {        var input = document.createElement("INPUT");        input.setAttribute("type", "file");        input.setAttribute("id", "fileinput");            document.body.appendChild(input);        input.addEventListener("change", this.fileChosen.bind(this));                input.click();        document.body.removeChild(input);            },    fileChosen: function(e) {                var fr = new FileReader();        fr.onload = receivedText.bind(this);        fr.readAsText(e.currentTarget.files[0]);                function receivedText(e) {                        lines = e.target.result;            var tempObj = JSON.parse(lines);                   }            }

The problem had been that while javascript was stuck in the loop doing nothing in particular, it was too busy to receive word from the window that a file had been chosen. So I needed to move the code that should only happen after the choice into its own function and execute that when the file choice came to javascript's attention. Not being a programmer by trade, many of these basic concepts are exceedingly alien to me... I just want to make a game goddammit