title: onlick event detect double click
body: <p>Im new here, my problem is that Im trying to play music or another sound with an onclick event, the problem begin when I try to stop that sound, I expect that the sound stop, but the sound begin ring again, here is the javascript code:</p>
  <pre><code>const playToPause = document.getElementById(&quot;play-song&quot;);
  
  // main audio functions
  function playSound() {
      const audio = new Audio(&quot;track_path&quot;);
      addEventListener(&quot;click&quot;, _ =&gt; {
          switch (playToPause.value) {
              case &quot;pause&quot;:
                  audio.play();
                  playToPause.value = &quot;play&quot;;
                  break;
              case &quot;play&quot;:
                  audio.pause();
                  playToPause.value = &quot;pause&quot;
          }
          console.log(playToPause.value);
      });
  }; 
  </code></pre>
  <p>And here is the button element</p>
  <pre><code>&lt;button id=&quot;play-song&quot; value=&quot;pause&quot; onclick=&quot;playSound()&quot; class=&quot;fa-solid fa-play fa-3x action-buttons&quot;&gt;&lt;/button&gt;
  </code></pre>
  <p>i had try before with if...else if, sentence and i changed it by a switch sentence thinking that the problem was on if...else if.</p>
  <p>Later I use a console.log to see the value of the button and I get this the first time that I click it:browser console as code tag with &quot;```&quot;)</p>
  <p>the console show that:
  <code>play                            jquery.client.js:16</code></p>
  <p>But if I click again on the button, to stop the sound, it detect as a double click</p>
  <p>The console show that:</p>
  <pre><code>play                            jquery.client.js:16 (The first click)
  pause                           jquery.client.js:16
  play                            jquery.client.js:16
  </code></pre>
  <p>Sorry, for my bad english, I hope that anyone can help thanks in advance :)</p>