1つのヘッダー要素の値を別の値に設定する

Question

これは簡単だと確信していますが、私はそれをうまくやっていないようで、Web検索は何も返されません。

H1要素ID「h1-title」のヘッダーと、H4要素ID「h4-title」のサイドバーがあります。

4つのWebページがあると仮定すると、「h1-title」の値を表示するには「h4-title」が必要です。

私はそれを行う方法の周りに私の頭を包むことができないようです。

ご協力いただければ幸いです。

ユーザーが「ホーム」ページにある場合、「h1-title」は「ホーム」と、「h4-title」は「ホーム」も読み取るようにします。 私はそれぞれのために書くことができますが、100ページあると仮定すると、2倍のコードがたくさんあります。

コード：

<!--  <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 

両方の要素が読み込まれた後にこのJavaScriptを置いていることを確認してください。例えばこのように：あなたは、本体がロードされた後、あなたがコードを実行することを確認しなければならないようにあなたは、外部JSファイルにこのコードを配置する場合

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

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

</script> 

。

Answer 2

私は最終的にそれを働かせました。

私はこのコードを</body>と</html>の間に配置しました（他の場所では動作しません）。

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