title: Firing off events on multiple click events JS
body: <p>I am building a booking system where I am currently attempting to connect all different steps with one another. I would like to connect them through &quot;previous&quot; and &quot;next&quot; buttons, where I implemented a switch statement that counts the clicks and hides/shows a certain step accordingly.</p>
  <p>However, I realised the switch statement doesn't make much sense anymore since the user might click on both previous <strong>and</strong> next buttons more than the cases I've set up. I've pasted my current code below, I know there must be a shorter way but I am not sure how to connect these two buttons to work as they should.</p>
  <p>Ideally, I would need different events to be fired off on different clicks.</p>
  <p><strong>HTML code</strong>:</p>
  <pre><code>&lt;div class=&quot;bookingArea&quot;&gt;
          &lt;div id=&quot;bookingOverlay&quot; class=&quot;overlay&quot;&gt;
              &lt;button id=&quot;bookBtn&quot;&gt;Click to book!&lt;/button&gt;
              &lt;div class=&quot;overlay-content&quot;&gt;
                  &lt;hr&gt;
                  &lt;div class=&quot;bookingSteps&quot;&gt;
                  &lt;/div&gt;
                  &lt;!-- AVAILABILITY --&gt;
                  &lt;form class=&quot;availability step1&quot;&gt;
                  &lt;/form&gt;
                  &lt;!-- buttons --&gt;
                  &lt;button class=&quot;previous hide&quot;&gt;Previous&lt;/button&gt;
                  &lt;button class=&quot;next&quot;&gt;Next&lt;/button&gt;
                  &lt;!-- PERSONAL DATA --&gt;
                  &lt;form class=&quot;personalData step2&quot;&gt;
                  &lt;/form&gt;
                  &lt;!-- ORDER OVERVIEW --&gt;
                  &lt;div class=&quot;orderOverview step3&quot;&gt;
                  &lt;/div&gt;
                  &lt;!-- PAYMENT --&gt;
                  &lt;form class=&quot;payment step4&quot;&gt;
                  &lt;/form&gt;
                  &lt;!-- RECEIPT --&gt;
                  &lt;div class=&quot;receipt step5&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p><strong>JS code:</strong></p>
  <pre class="lang-js prettyprint-override"><code>// activate &quot;next&quot; btn
  var counter = 0;
  
  document.querySelector(&quot;.next&quot;).addEventListener('click', function () {
  
      document.querySelector(&quot;.previous&quot;).classList.remove(&quot;hide&quot;);
  
      switch (++counter) {
          case 1:
              document.querySelector(&quot;.availability&quot;).classList.add(&quot;step1&quot;);
              document.querySelector(&quot;.personalData&quot;).classList.remove(&quot;step2&quot;);
              return +counter;
          case 2:
              document.querySelector(&quot;.personalData&quot;).classList.add(&quot;step2&quot;);
              document.querySelector(&quot;.orderOverview&quot;).classList.remove(&quot;step3&quot;);
              return +counter;
          case 3:
              document.querySelector(&quot;.orderOverview&quot;).classList.add(&quot;step3&quot;);
              document.querySelector(&quot;.payment&quot;).classList.remove(&quot;step4&quot;);
              return +counter;
          case 4:
              document.querySelector(&quot;.payment&quot;).classList.add(&quot;step4&quot;);
              document.querySelector(&quot;.receipt&quot;).classList.remove(&quot;step5&quot;);
              return +counter;
      }
      counter = 0;
  });
  
  // activate &quot;previous&quot; btn
  var counter = 0;
  
  document.querySelector(&quot;.previous&quot;).addEventListener('click', function () {
      switch (++counter) {
          case 1:
              return +counter;
          case 2:
              document.querySelector(&quot;.availability&quot;).classList.remove(&quot;step1&quot;);
              document.querySelector(&quot;.personalData&quot;).classList.add(&quot;step2&quot;);
              console.log(&quot;2&quot;);
              return +counter;
          case 3:
              document.querySelector(&quot;.personalData&quot;).classList.remove(&quot;step2&quot;);
              document.querySelector(&quot;.orderOverview&quot;).classList.add(&quot;step3&quot;);
              console.log(&quot;3&quot;);
              return +counter;
          case 4:
              document.querySelector(&quot;.orderOverview&quot;).classList.remove(&quot;step3&quot;);
              document.querySelector(&quot;.payment&quot;).classList.add(&quot;step4&quot;);
              console.log(&quot;4&quot;);
              return +counter;
          case 5:
              document.querySelector(&quot;.payment&quot;).classList.remove(&quot;step4&quot;);
              document.querySelector(&quot;.receipt&quot;).classList.add(&quot;step5&quot;);
              console.log(&quot;5&quot;);
              return +counter;
      }
      counter = 0;
  });
  </code></pre>