Setze Wert von einem Header-Element zu einem anderen

Question

Ich bin sicher, das ist einfach, aber ich kann nicht scheinen, es auszuarbeiten und Websuchen sind mit nichts zurückgekommen, vielleicht nur die Art, wie ich es formuliert habe.

Ich habe eine Kopfzeile mit einer H1-Element-ID "h1-title" und einer Sidebar mit einer H4-Element-ID "h4-title".

Angenommen, es gibt vier Webseiten, ich möchte "h4-Titel", um den Wert von "h1-Titel" anzuzeigen.

Ich bin nicht in der Lage, meinen Kopf darüber zu wickeln, wie es geht.

Jede Hilfe würde sehr geschätzt werden.

Nur um zu verdeutlichen, wenn der Benutzer auf der Startseite ist, wird "h1-title" "Home" lesen, ich möchte "h4-title" auch "Home" lesen. Ich verstehe, ich könnte es für jeden einzelnen schreiben, aber wenn wir dann davon ausgehen, dass es 100 Seiten gibt, ist es eine Menge Doppel-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 

Stellen Sie sicher, dieses JavaScript zu setzen, nachdem beide Elemente geladen haben. Wie dies zum Beispiel:

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

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

</script> 

Wenn Sie diesen Code in einer externen JS-Datei setzen, wie sollten Sie, stellen Sie sicher, dass Sie den Code ausführen, nachdem der Körper geladen ist.

Answer 2

OK, also mit viel Versuch und Irrtum habe ich endlich funktioniert.

Ich habe diesen Code zwischen </body> und </html> platziert (es scheint nicht anderswo zu funktionieren).

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