Linking the href value from an <a> tag to another html page
<p>I have 2 html pages. The first page holds the links and once the user clicks on one link, then it redirects to the second page. What I am trying to achieve though is to have the href value at the top of the second page once the user clicks one of the links. </p>

<p>At the moment, I have a function that gets the href value, but when I go to the second page I get an error on the console "Cannot read property href of null".</p>

<p>What am I missing to get this behaviour? I enclose my code for more information</p>

<ol>
<li><p>The html for the link (Link.html)</p>

<pre><code>&lt;body&gt;
    &lt;a href="ApplicationForm.html" id="linkId" onclick="getLinkValue()"&gt;Link&lt;/a&gt;
&lt;/body&gt;
</code></pre></li>
<li><p>The script that gets the href value (AppInit.js)</p>

<pre>
<code>
    function getLinkValue() {
        var linkValue = document.getElementById("linkId").href;
        return linkValue;
    };
</code></pre></li>
<li><p>The html page that the href value should be displayed(ApplicationForm.html)</p>

<pre><code>  &lt;button type="button" name="button" onclick="displayLinkValue();"&gt;Get href value&lt;/button&gt;
  &lt;div id="container"&gt;
          &lt;!-- The container that should include the href value from the previous page --&gt;
  &lt;/div&gt;
</code></pre></li>
<li><p>The script that is supposed to get the link value from AppInit (This is a different js file)</p>

<pre><code>
var script = document.createElement('script');
script.src ="AppInit.js";
document.getElementsByTagName('script')[0].parentNode.appendChild(script);
function displayLinkValue() {
    var linkContainer = document.getElementById('container');
    linkContainer.innerHTML += getLinkValue();
};
</code></pre></li>
</ol>