title: How to set value of textarea in different HTML file?
body: <p>I am building a chrome/firefox web extension. When the user clicks the button in the extension's popup, the extension's UI changes. </p>
  
  <p>Here's a visual example: </p>
  
  <p>Before pressing one of three buttons:</p>
  
  <p><a href="https://i.stack.imgur.com/K0NI8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K0NI8.png" alt="Pre_Button_Press"></a></p>
  
  <p>After pressing one of three buttons:</p>
  
  <p><a href="https://i.stack.imgur.com/ime0j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ime0j.png" alt="Post_Button_Press"></a></p>
  
  <p>As you can see from the screenshot, after pressing the button, a <code>textarea</code> is created.</p>
  
  <p>Here is the code that does that (this function is called when one of the three original buttons is pressed):</p>
  
  <pre><code>function createSummaryBox(summary) {
      console.log("Setting textarea content to: " + summary)
      window.location.href = "../summary_page/summary_page.html";
      document.getElementById('summary-field').value = summary;
  }
  </code></pre>
  
  <p>However, even when this function is called, the content inside of the <code>textarea</code> does not change. </p>
  
  <p>Instead, I get the following error:</p>
  
  <blockquote>
    <p>TypeError: document.getElementById(...) is null</p>
  </blockquote>
  
  <p>Here is the code for "summary_page.html":</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="../common/common_styles.css" /&gt;
      &lt;link rel="stylesheet" href="summary_page.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class = container&gt;
          &lt;textarea class="summary-field" type="text" disabled="disabled" id = "summary-field"&gt;&lt;/textarea&gt;
          &lt;div class="btn-group"&gt;
              &lt;button class="btn"&gt;Back&lt;/button&gt;
              &lt;button class="btn"&gt;Copy&lt;/button&gt;
              &lt;button class="btn"&gt;Enlarge&lt;/button&gt;
              &lt;script src="summary_page.js"&gt;&lt;/script&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Also, the sole content of "summary_page.js" is <code>console.log("Summary Page Loaded);</code>, which is printed out to the console.</p>
  
  <p>How do I fix this? </p>