Html/Javascript Document.getelementbyid Not working
<p>I am an intermediate HTML and I am starting to learn JavaScript within it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Uh oh! No page.&lt;/title&gt;  
    &lt;h1 class="index"&gt;The page you requested for is not available! Click &lt;a href="index.html" class="index"&gt;here&lt;/a&gt; to go back&lt;/h1&gt;
    &lt;style&gt;
        .index {
            text-decoration: none;
            font-family: Arial;
        }
    &lt;/style&gt;
&lt;/head&gt;
    &lt;body onload="myfunc()"&gt;
    &lt;script&gt;
function myfunc() {
    var x;
    if (confirm("Im confuzzled! Where did the page go?\n\nSelect OK to be redirected and Cancel to do it manually ") == true) {
        window.location  = "index.html";
    } else {
        alert("You will now manually have to redirect to the lemoon homepage");
    }
    document.getElementById("demo").innerHTML = x;
}
&lt;/script&gt;
    &lt;/body&gt;
    &lt;footer onload="pageLocate()"&gt;
    &lt;script&gt;
    function pageLocate() {
        
document.getElementById("demo").innerHTML = 
"Page location is: " + window.location.href;
    }    
    &lt;/script&gt;
    &lt;/footer&gt;
&lt;/html&gt;</code></pre>
</div>
</div>

I cannot get the document tag to display anything. Can you please help?</p>