title: Linking the href value from an <a> tag to another html page
body: <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>