title: Retreiving contents of previously obtained text
body: <p>This is a follow-up to a previous post (solved).  In the previous post we loaded a delimited text file then took action on the contents of the file.  But what we did was in one smooth progression of events.  In my actual implementation, events will occur separately.  First, a tab delimited text file will be loaded, using the FileReader API, and displayed on the page.  Much later a function will need to retrieve the loaded content and do stuff with it.  I thought I would have no difficulty separating the tasks, but I was wrong.  I don't know what I'm doing wrong or if I'm going about it the wrong way.  I'd appreciate some input.  </p>
  
  <p>Note: I don't necessarily have to use the information directly from the pre-tag "fileDisplayArea".  I just thought that would work and be easy.  I could use the string stored in memory, if that is better.  The string should never be more than 6 or 7 Mb.</p>
  
  <p>What do I need to do to, so at a later time I can use the string loaded and placed in "fileDisplayArea"?</p>
  
  <p>Thanks in advance,
  Andrew</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    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;
              }
              reader.readAsText(file);
          } else {
              fileDisplayArea.innerText = "File not supported!"
          }
      });
  
      // doIt functionality
      document.getElementById("doIt").addEventListener("click", function () {
          var myTemp = document.getElementById("fileDisplayArea");
          console.log(myTemp);
          // trying to retreive original reader.result contents so I can do stuff with it
          // i thought it would be as simple as using getElementByID, but i'm obviously wrong
      }, false);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;br /&gt;
  Step 1:&lt;br /&gt;
  Select a text file:
  &lt;input type="file" id="fileInput"&gt;
  &lt;hr /&gt;
  Step 2:&lt;br /&gt;
  Retreive the contents previously loaded.  (Normally 'doIt' would be called from another function, not a button.)
  &lt;button id="doIt"&gt;doIt&lt;/button&gt;
  &lt;hr /&gt;
  &lt;pre id="fileDisplayArea"&gt;&lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>