Set value of one header element to another

Question

I am sure this is simple, but I can't seem to work it out and web searches have come back with nothing, perhaps just the way I have worded it.

I have a header with a H1 element ID "h1-title" and a sidebar with a H4 element ID "h4-title".

Assuming there are four web pages, I want "h4-title" to display the value of "h1-title".

I don't seem to be able to wrap my head around how to do it.

Any help would be greatly appreciated.

Just to clarify, if the user is on the "Home" page, "h1-title" will read "Home", I want "h4-title" to also read "Home". I understand I could just write it for each one, but if we then assume there's 100 pages, it's a lot of double up code.

Code:

<!--        <PAGE HEADER>       -->
<div id="header">
    <header>

<!--        <HEADER TITLE>      -->
<div id="header-title">
    <h1 id="h1-title">Page Header</h1> <!-- **HERE'S "h1-title"** --> 
</div>
<!--        </HEADER TITLE>     -->

<!--        <HEADER NAVBAR>     -->
<div id="top-nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Content</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
<!--        </HEADER NAVBAR     -->

    </header>
</div>
<!--        </PAGE HEADER>          -->

<!--        <PAGE CONTENT       -->
<div id="content">

<!--        <PAGE SIDEBAR>      -->
<div id="aside">
    <aside>

      <h4 id="h4-title"></h4> <!-- **HERE'S "h4-title"** -->
      <ul id="ul-aside" style="list-style-type:none; font-size:30%;">
          <li><a href="">Content1</a></li><br />
          <li><a href="">Content2</a></li><br />
          <li><a href="">Content3</a></li><br />
          <li><a href="">Content4</a></li><br />
          <li><a href="">Content5</a></li><br />
          <li><a href="">Content6</a></li><br />
          <li><a href="">Content7</a></li><br />
          <li><a href="">Content8</a></li><br />
      </ul>

    </aside>
</div>
<!--        </PAGE SIDEBAR>     -->

Answer 1

document.getElementById("h4-title").innerHTML = document.getElementById("h1-title").innerHTML

Make sure to put this JavaScript AFTER both elements have loaded. Like this for example:

<h1>YOUR HEADER</h1>
<h4>OTHER HEADER </h4>

<script> 
document.getElementById("h4-title").innerHTML = document.getElementById("h1-title").innerHTML

 </script>

If you put this code in an external JS file, like you should, make sure you run the code after the body has loaded.

Answer 2

OK so with a lot of trial and error I have finally got it working.

I have placed this code between </body> and </html> (It doesn't seem to work anywhere else).

<script>
    var title;
    title = document.getElementById("h1-title").innerHTML;
    document.getElementById("h4-title").innerHTML = title;
</script>