How to set value of textarea in different HTML file?

I am building a chrome/firefox web extension. When the user clicks the button in the extension's popup, the extension's UI changes.

Here's a visual example:

Before pressing one of three buttons:

After pressing one of three buttons:

As you can see from the screenshot, after pressing the button, a textarea is created.

Here is the code that does that (this function is called when one of the three original buttons is pressed):

function createSummaryBox(summary) {
    console.log("Setting textarea content to: " + summary)
    window.location.href = "../summary_page/summary_page.html";
    document.getElementById('summary-field').value = summary;
}

However, even when this function is called, the content inside of the textarea does not change.

Instead, I get the following error:

TypeError: document.getElementById(...) is null

Here is the code for "summary_page.html":

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../common/common_styles.css" />
    <link rel="stylesheet" href="summary_page.css" />
</head>

<body>
    <div class = container>
        <textarea class="summary-field" type="text" disabled="disabled" id = "summary-field"></textarea>
        <div class="btn-group">
            <button class="btn">Back</button>
            <button class="btn">Copy</button>
            <button class="btn">Enlarge</button>
            <script src="summary_page.js"></script>
        </div>
    </div>
</body>

</html>

Also, the sole content of "summary_page.js" is console.log("Summary Page Loaded);, which is printed out to the console.

How do I fix this?

Recommended topics

Hot tags