0

I am a javascript noob and have a question about placement of document.getElementById('blahblah').innerHTML statement in the script.

More specifically, I have the following code

function upload(evt) {
 if (!browserSupportFileUpload()) {
   alert('The File APIs are not fully supported in this browser!');
 } else {
    var data = null;
    var file = evt.target.files[0];
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(event) {
      var csvData = event.target.result;
      data = $.csv.toArrays(csvData);
      if (data && data.length > 0) {
        alert('Imported -' + data.length + '- rows successfully!');
      } else {
        alert('No data to import!');
      }
    };
    reader.onerror = function() {
        alert('Unable to read ' + file.fileName);
    };
  }
}

It's basically reading a csv file and saving the csv data into a variable called "data".

Now my question is, when I place document.getElementById('blahblah').innterHTML = data[0][0]; at the end of the code, it will not execute.

It only executes when the statement is placed somewhere within the reader.onload function.

Is there a reason this does not execute at the bottom of the code?

Gokul Shinde
  • 957
  • 3
  • 10
  • 30
Yon-Joon Choo
  • 21
  • 5
  • AT the bottom of what part of your code? Have you checked the console for errors? Have you inspected data to ensure that yes it is a multidimensional array? Have you checked that your specific element exists with that id? – scrappedcola Aug 12 '16 at 13:54
  • @scrappedcola Yes, the variable data is fine and executes perfectly as long as it's placed somewhere within the reader.onload statement. By "Bottom of the code", I mean places such as below reader.onerror, or at the very end after the last curly bracket. – Yon-Joon Choo Aug 12 '16 at 14:08
  • your reader executes asynchronously. `data` doesn't get defined until the load event fires and there is nothing saying it will fire before the code executes after the definition of the load or error handlers. – scrappedcola Aug 12 '16 at 14:17

1 Answers1

0

Yes, the reason is that the whole script gets executed when the browser reaches it. So the browser sees your scripts, and then tries to execute document.getElementById('blahblah').innterHTML = data[0][0]; but data was not uploaded yet. If you place it in the onload the browser know to execute the function only when the data is uploaded.

Jonas Grumann
  • 10,438
  • 2
  • 22
  • 40
  • Hi Jonas, so I get that it has to be placed somewhere AFTER reader.onload, because obviously until that point data = null. But then shouldn't I be able to query the "data" variable just about anywhere else afterwards? e.g. after the function, before the ? – Yon-Joon Choo Aug 12 '16 at 14:09
  • 1
    No because the script doesn't stop to wait until "data" has loaded. It just goes on, even if it's not yet defined, but it sees an "onload" function so it know "I'll have to come back here and do something when this thing is loaded". – Jonas Grumann Aug 12 '16 at 14:26