Setting and using a variable (JavaScript)

Question

I'm loading a text file using the FileReader API. In the process I place the contents in a <pre> tag fileDisplayArea.innerText = reader.result; . Later I want to use this content in the duringPlayback function that is triggered during the playback of a video. video.ontimeupdate = function () { duringPlayback() };

I don't want to pull in the loaded file's contents over and over and over again by placing it within the video.ontimeupdate function, so I thought I'd simply load the reader.result (or fileDisplayArea.innerText) content into a global variable where I could later perform the needed actions on the content within the video.ontimeupdate function. But I can't seem to set the variable so that it can be used within the video.ontimeupdate function. I was running in strict mode, but I've commented that out and it still doesn't work.

How can I set the reader.result contents in a variable that can be used within the video.ontimeupdate function? I'm stumped. (And I'd like to run in strict mode, if possible.)

Thanks in advance, Andrew

 // Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed
video.ontimeupdate = function () { duringPlayback() };

function duringPlayback() {
    document.getElementById("speed").innerHTML = (Math.round(video.playbackRate * 100) / 100).toFixed(2);

    // I need to use the var hostFile (reader.result) contents here. ###########

}


 // Load Tab Delimted File
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function (e) {
    var file = fileInput.files[0];
    var textType = /text.*/;
    if (file.type.match(textType)) {
        var reader = new FileReader();
        reader.onload = function (e) {
            // Entire file
            fileDisplayArea.innerText = reader.result;
            var hostFile = reader.result; //###########
        }
        reader.readAsText(file);
        //doIt(); //Normally doIt would be called from another function
    } else {
        fileDisplayArea.innerText = "File not supported!"
    }
});

Answer 1

I thought I'd simply load the reader.result (or fileDisplayArea.innerText) content into a global variable

So just do that. Declare your variable outside of everything:

var hostFile;
video.ontimeupdate = function () { duringPlayback() };

function duringPlayback() {
  document.getElementById("speed").innerHTML = (Math.round(video.playbackRate * 100) / 100).toFixed(2);

  // I need to use the var hostFile (reader.result) contents here.
  console.log(hostFile);

}

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function (e) {
  var file = fileInput.files[0];
  var textType = /text.*/;
  if (file.type.match(textType)) {
    var reader = new FileReader();
    reader.onload = function (e) {
        // Entire file
        fileDisplayArea.innerText = reader.result;
        hostFile = reader.result; //###########
    }
    reader.readAsText(file);
    //doIt(); //Normally doIt would be called from another function
  } else {
    fileDisplayArea.innerText = "File not supported!"
  }
});