JS Variable not available outside function

Question

I have a little problem with a variable in my code.

I'm having a variable which gets declaired outside the function but then can not be accessed after it.

So first you input a file which is combined with this code:

input.addEventListener("change", sefunction);

Now this file (which is a HTML-file) should get parsed into a string:

var htmlInput;
var inputFile = "";
function sefunction() {
if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();
    reader.addEventListener('load', function (e) {
        inputFile = e.target.result;
        htmlInput = new DOMParser().parseFromString(inputFile, "text/html").documentElement;
        console.log(htmlInput);            //WORKING FINE
        });
    reader.readAsBinaryString(myFile);
    document.getElementById("starten").disabled = false;
    document.getElementById("myFile").disabled = true;
    console.log(htmlInput);                //NOT WORKING
    initialisation2();
  };   
};

Then, to test it, I want to console.log the htmlInput:

function initialisation2() {
    console.log(htmlInput);                //NOT WORKING
}

Now what happens: The first console.log gives me the content of htmlInput. The second and the third (in initialisation2()) don't.

Can someone tell me why? The variable is declared outside the very first function so it sould be available in the rest of the code. I need to parse the HTML-input-file like this because I want to be able to access things like htmlInput.getElementsByTagName('table').

score 1 · Accepted Answer · answered Apr 01 '20 at 15:34

The htmlInput variable is being assigned a value after the second console.log and initialisation2 are called. This is because FileReader is asynchronous, so htmlInput will be undefined until the file has been read.

Moving the initialisation2 call into the load callback will resolve this:

reader.addEventListener("load", function(e) {
  inputFile = e.target.result;
  htmlInput = new DOMParser().parseFromString(inputFile, "text/html").documentElement;
  initialisation2();
});

We can replicate what is happening using a timeout that mimics the asynchronousity of the file reader:

var htmlInput;

function sefunction() {
  setTimeout(() => {
    htmlInput = "Given htmlInput";
    initialisation2(); // logs "Given htmlInput"
  }, 1000);

  initialisation2(); // logs "undefined"
}

function initialisation2() {
  console.log(htmlInput);
}

Thank you very much! I now changed the load callback so that ```htmlInput``` immediately gets passed into a new function which then assigns its value to a new variable which then can be used everywhere in the rest of my script. — E Lon Mask, Apr 01 '20 at 19:46

JS Variable not available outside function

1 Answers1