title: addEventListener click function does not work
body: <p>I needed to save an html table's content in a .txt file. So I found this example:</p>
  
  <p><strong>page.html:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;textarea id="textbox"&gt;Type something here&lt;/textarea&gt; 
          &lt;button id="create"&gt;Create file&lt;/button&gt; 
          &lt;a download="info.txt" id="downloadlink" style="display: none"&gt;Download&lt;/a&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  
  
  <p><strong>create.js:</strong></p>
  
  <pre><code>(function () {
  var textFile = null,
    makeTextFile = function (text) {
      var data = new Blob([text], {type: 'text/plain'});
  
       if (textFile !== null) {
       window.URL.revokeObjectURL(textFile);
      }
  
      textFile = window.URL.createObjectURL(data);
  
      return textFile;
    };
  
    var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');
  
    create.addEventListener('click', function () {
      var link = document.getElementById('downloadlink');
      link.href = makeTextFile(textbox.value);
      link.style.display = 'block';
    }, false);
  })();
  </code></pre>
  
  <p>This code has a text area. When you click the botton it creates a "Download" link and by clicking it you can download the text area content as a txt file.</p>
  
  <p>I am trying to implement a very similar function. Only difference is I get my string from an html table. Here is the code:</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row" style=""&gt;
      &lt;section class="module span12" style="top: 50px"&gt;
          &lt;div class="module-body"&gt;
              &lt;button type="button" class="btn-blue"
                  style="top: 80px; right: 130px;" onclick="loadOutputs()"&gt;Load
                  Outputs&lt;/button&gt;
              &lt;button class="btn btn-blue" id="save" onclick="createText()"
                  style="top: 80px; right: 130px;"&gt;Save&lt;/button&gt;
              &lt;a download="info.txt" id="downloadlink" style="display: block"&gt;Download&lt;/a&gt;
              &lt;div id="loadingElement" class="loaded"&gt;
                  &lt;table&gt;
                      &lt;tbody id="tbody"&gt;&lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>javascript:</strong></p>
  
  <pre><code>function createText() {
  
      var text = '';
      var table = document.getElementById("tbody");
      if (table) {
          for ( var i = 0, row; row = table.rows[i]; i++) {
              text = text.concat(row.innerText);
              }
      }
  
      var textFile = null, makeTextFile = function(text) {
  
          var data = new Blob([text], {type: 'text/plain'});
          if (textFile !== null) {
              window.URL.revokeObjectURL(textFile);
          }
  
          textFile = window.URL.createObjectURL(data);
          return textFile;
      };
  
      var create = document.getElementById('save');
  
      create.addEventListener('click', function() {
          var link = document.getElementById('downloadlink');
          link.href = makeTextFile(text);
          link.style.display = 'block';
      }, false);
  }
  </code></pre>
  
  <p>In the js code, when I debug, I see that it successfully fills the text variable with the contents of the table, but cannot get into create.addEventListener().</p>
  
  <p>Inside the function variable link seems to be 'undefined', so I make the assumption that it cannot get inside of the function. What might be the problem?</p>