将功能组合到一个按钮

Question

我想有一个单独的按钮，上面写着“ Viewer 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>

没有错误消息，但我只能使一个或另一个工作，而不能组合使用。

在此先感谢您的帮助。

Answer 1

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>

这是我的版本-我从更改DOM的代码中分离出了用于控制当前哪个查看器可见的逻辑，因此您可以更直接地查看当前查看器如何更改页面内容。我也不太了解您想要在按钮上更改什么，我已经将其设置为内容切换，因为这似乎就是您想要的？您的示例仅切换导航栏。让我知道这很适合您。

Answer 2

因此，如果您希望两者一起工作，请将您的javascript代码编写为：

<!--  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();
     }
  }

}

然后替换HTML行

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

与行

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

我希望它应该起作用。如果在实施该解决方案时遇到任何问题，请发表评论。