javascript - 将一个 header 元素的值设置为另一个

Question

我确信这很简单，但我似乎无法解决，网络搜索一无所获，也许正是我所说的那样。

我有一个带有 H1 元素 ID“h1-title”的标题和一个带有 H4 元素 ID“h4-title”的边栏。

假设有四个网页，我想让“h4-title”显示“h1-title”的值。

我似乎无法思考如何去做。

如有任何帮助，我们将不胜感激。

澄清一下，如果用户在“主页”页面上，“h1-title”将显示为“主页”，我希望“h4-title”也显示为“主页”。我知道我可以为每一个都写一个，但是如果我们假设有 100 页，那么代码就会翻倍。

代码:

<!--        <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。例如:

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

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

 </script>

如果您将此代码放在外部 JS 文件中，请确保在主体加载后运行代码。