将功能结合到一个按钮

我想拥有一个说" viever One"的按钮，并与带有ID的部分绑定了" viewer_one"。当用户单击按钮时，我希望它更改以显示" Viewer Two"，并且还显示了ID" viewer_two"部分，以代替其他导航的位置。每次单击按钮时，都会切换到另一个。

我有两组脚本可以单独执行每个功能，但是我不知道如何同时工作。暂时，我可以拥有一个按钮，可以在单击时更改其价值，但不会影响代码的其余部分，或者我可以将按钮影响其余的代码，但其自己的文本不会更改。

我在下面包含了我的代码 - 我包含了两组JavaScript，以便您可以看到我拥有的东西，但是它们只有在我包括一个或另一个时才起作用 - 我需要帮助弄清楚如何让它们一起工作。

以下是相关零件的代码的凝结版本 - 主代码为每个查看器提供了更多列表项目。

    
       <!--  this gets the button click to change which list is visible-->
 
 function switchVisible() {
            if (document.getElementById('viewer_one')) {
                if (document.getElementById('viewer_one').style.display == 'none') {
                    document.getElementById('viewer_one').style.display = 'block';
                    document.getElementById('viewer_two').style.display = 'none';
                }
                else {
                    document.getElementById('viewer_one').style.display = 'none';
                    document.getElementById('viewer_two').style.display = 'block';
                }
            }
   }          
    
    
   <!--This gets the button text to change-->
          function myFunction() {
            var x = document.getElementById("Button1");
            if (x.innerHTML === "Viewer Two") {
              x.innerHTML = "Viewer One";
              } else {
                x.innerHTML = "Viewer Two";
                    }
      }

         <section id="second_nav">      
      <input id="Button1" type="button" value="Viewer One" onclick="switchVisible();"/>         
      <button id="Button1" onclick="myFunction()">Viewer One</button>          
      <nav class="viewer_nav" id="viewer_one">
        <ul>
          <li style="color: blue;"><b>VIEWER ONE:</b></li>
          <li><a href="#client1">Client Info</a></li>
          <li><a href="#scripts1">Scripts</a></li>
        </ul>
      </nav>          
      <nav class="viewer_nav" id="viewer_two">
        <ul>
          <li style="color: blue;"><b>VIEWER TWO:</b></li>
          <li><a href="#client2">Client Info</a></li>
          <li><a href="#scripts2">Scripts</a></li>
        </ul>
      </nav>
    </section>
    
    <div id="content_area">     
      <section class="viewer_class" id="view_area_one">
        <h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
        <span id="client1"></span>
        <h4>Client Info</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <span id="scripts1"></span>
        <h4>Scripts</h4>
        <p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
      </section>
  
     <section class="viewer_class" id="view_area_two">
       <h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
        <span id="client2"></span>
        <h4>Client Info</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <span id="scripts2"></span>
        <h4>Scripts</h4>
        <p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
     </section>

没有错误消息，但是我只能让一个或另一个可以工作，而不是组合。

事先感谢您的任何帮助。

var currentViewer = 1
updatePage(currentViewer)
function switchViewer() {
  if (currentViewer === 1) {
    currentViewer = 2
  } else if (currentViewer === 2) {
    currentViewer = 1
  }
  updatePage(currentViewer)
}
function updatePage(viewer) {
  switch(viewer) {
    case 1:
      document.getElementById('viewer_one').style.display = 'block';
      document.getElementById('viewer_two').style.display = 'none';
      document.getElementById('view_area_one').style.display = 'block';
      document.getElementById('view_area_two').style.display = 'none';
      document.getElementById('switchViewerButton').innerHTML = "Viewer 2"
      break;
    case 2:
      document.getElementById('viewer_one').style.display = 'none';
      document.getElementById('viewer_two').style.display = 'block';
      document.getElementById('view_area_one').style.display = 'none';
      document.getElementById('view_area_two').style.display = 'block';
      document.getElementById('switchViewerButton').innerHTML = "Viewer 1"
      break;
  }
}

<section id="second_nav">
  <button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>
  <nav class="viewer_nav" id="viewer_one">
    <ul>
      <li style="color: blue;"><b>VIEWER ONE:</b></li>
      <li><a href="#client1">Client Info</a></li>
      <li><a href="#scripts1">Scripts</a></li>
    </ul>
  </nav>
  <nav class="viewer_nav" id="viewer_two">
    <ul>
      <li style="color: blue;"><b>VIEWER TWO:</b></li>
      <li><a href="#client2">Client Info</a></li>
      <li><a href="#scripts2">Scripts</a></li>
    </ul>
  </nav>
</section>
<div id="content_area">
  <section class="viewer_class" id="view_area_one">
    <h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
    <span id="client1"></span>
    <h4>Client Info (view_area_one)</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <span id="scripts1"></span>
    <h4>Scripts</h4>
    <p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
  </section>
  <section class="viewer_class" id="view_area_two">
    <h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
    <span id="client2"></span>
    <h4>Client Info  (view_area_two)</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Some other text...</p>
    <span id="scripts2"></span>
    <h4>Scripts From V2</h4>
    <p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
  </section>

<!--  this gets the button click to change which list is visible-->
 function switchVisible() {
<!-- Your Code -->
}
<!--This gets the button text to change-->
 function myFunction() {
<!-- Your Code -->
}
<!-- My Code -->
window.onload = function(){
  const button = document.querySelector("#switchViewerButton");
  if (button) {
     button.onclick = function(event){
        event.preventDefault();
        switchVisible();
        myFunction();
     }
  }
}

<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>

<button id="switchViewerButton">Viewer One</button>