title: Problem with the music player on the website - odd clicks
body: <p>I'm creating a music player for a website that will contain 14 playlists by default, but in the process of writing the site I've come across one problem - the selected playlist is only triggered by odd clicks on the page, any even clicks cause problems.</p>
  <p><strong>In a nutshell:</strong></p>
  <ol>
  <li>I click on playlist A with a single click - it works perfectly</li>
  <li>Then I select playlist B with a single click - it does not work</li>
  <li>Single click back to playlist A - works fine</li>
  <li>Then I select playlist B with a double click - it works flawlessly</li>
  </ol>
  <p>So every click #1, #3, #5, #7 etc works flawlessly, however clicks #2, #4, #6, #8 don't work, they don't play music and there is no way to pause or unpause the playlist either.</p>
  <p><strong>Code:</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="pl"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;RADIO&lt;/title&gt;
      &lt;link rel="stylesheet" href="style2.css"&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="menu"&gt;
          &lt;div id="buttons"&gt;
              &lt;div class="button-L" onclick="document.body.style.backgroundImage = 'url(img/1.jpg)';"&gt;&lt;button value="W" onclick="gra(this)"&gt;Playlista 1&lt;/button&gt;&lt;/div&gt;
              &lt;div class="button-S" onclick="document.body.style.backgroundImage = 'url(img/2.jpg)';"&gt;&lt;button value="W1" onclick="gra(this)"&gt;Playlista 2&lt;/button&gt;&lt;/div&gt;
              &lt;div class="button-S" onclick="document.body.style.backgroundImage = 'url(img/3.jpg)';"&gt;&lt;button value="W2" onclick="gra(this)"&gt;Playlista 3&lt;/button&gt;&lt;/div&gt;
              &lt;div class="button-S" onclick="document.body.style.backgroundImage = 'url(img/4.jpg)';"&gt;&lt;button value="W3" onclick="gra(this)"&gt;Playlista 4&lt;/button&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   
      &lt;div class="music-container" id="music-container"&gt;
          &lt;div class="music-info"&gt;
            &lt;h4 id="title"&gt;&lt;/h4&gt;
            &lt;div class="progress-container" id="progress-container"&gt;
              &lt;div class="progress" id="progress"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
     
          &lt;audio src="music/sport.mp3" id="audio"&gt;&lt;/audio&gt;
     
          &lt;div class="img-container"&gt;
            &lt;img src="img/cd-w3.jpg" alt="music-cover" id="cover"&gt;
          &lt;/div&gt;
   
          &lt;div class="navigation"&gt;
            &lt;button id="prev" class="action-btn"&gt;
              &lt;i class="fas fa-backward"&gt;&lt;/i&gt;
            &lt;/button&gt;
   
            &lt;button id="play" class="action-btn action-btn-big"&gt;
              &lt;i class="fas fa-play"&gt;&lt;/i&gt;
            &lt;/button&gt;
   
            &lt;button id="next" class="action-btn"&gt;
              &lt;i class="fas fa-forward"&gt;&lt;/i&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
   
      &lt;script type="text/javascript"&gt;
          function gra(tytul) {
              var tytulGry = tytul.value;
              var songs = [];
               
              // Song titles
              if(tytulGry === "W") songs = ['The Trail', 'Kaer Morhen'];
              else if(tytulGry === "W1") songs = ['After The Storm', 'Spikeroog'];
              else if(tytulGry === "W2") songs = ['Trauma', 'Foxkids'];
              else if(tytulGry === "W3") songs = ['Myspace', 'Sport'];
           
              const musicContainer = document.getElementById('music-container');
              const playBtn = document.getElementById('play');
              const prevBtn = document.getElementById('prev');
              const nextBtn = document.getElementById('next');
   
              const audio = document.getElementById('audio');
              const progress = document.getElementById('progress');
              const progressContainer = document.getElementById('progress-container');
              const title = document.getElementById('title');
              const cover = document.getElementById('cover');
              const currTime = document.querySelector('#currTime');
              const durTime = document.querySelector('#durTime')
               
              // Keep track of song
              let songIndex = 1;
   
              // Initially load song details into DOM
              loadSong(songs[songIndex]);
   
              // Update song details
              function loadSong(song) {
              title.innerText = song;
              audio.src = `music/`+song+`.mp3`;
              cover.src = `img/`+tytulGry+`.jpg`;
              }
   
              // Play song
              function playSong() {
              musicContainer.classList.add('play');
              playBtn.querySelector('i.fas').classList.remove('fa-play');
              playBtn.querySelector('i.fas').classList.add('fa-pause');
   
              audio.play();
              }
   
              // Pause song
              function pauseSong() {
              musicContainer.classList.remove('play');
              playBtn.querySelector('i.fas').classList.add('fa-play');
              playBtn.querySelector('i.fas').classList.remove('fa-pause');
   
              audio.pause();
              }
   
              // Previous song
              function prevSong() {
              songIndex--;
   
              if (songIndex &lt; 0) {
                  songIndex = songs.length - 1;
              }
   
              loadSong(songs[songIndex]);
   
              playSong();
              }
   
              // Next song
              function nextSong() {
              songIndex++;
   
              if (songIndex &gt; songs.length - 1) {
                  songIndex = 0;
              }
   
              loadSong(songs[songIndex]);
   
              playSong();
              }
   
              // Update progress bar
              function updateProgress(e) {
              const { duration, currentTime } = e.srcElement;
              const progressPercent = (currentTime / duration) * 100;
              progress.style.width = `${progressPercent}%`;
              }
   
              // Set progress bar
              function setProgress(e) {
              const width = this.clientWidth;
              const clickX = e.offsetX;
              const duration = audio.duration;
   
              audio.currentTime = (clickX / width) * duration;
              }
   
              //get duration &amp; currentTime for Time of song
              function DurTime (e) {
                  const {duration,currentTime} = e.srcElement;
                  var sec;
                  var sec_d;
   
                  // define minutes currentTime
                  let min = (currentTime==null)? 0:
                  Math.floor(currentTime/60);
                  min = min &lt;10 ? '0'+min:min;
   
                  // define seconds currentTime
                  function get_sec (x) {
                      if(Math.floor(x) &gt;= 60){
                           
                          for (var i = 1; i&lt;=60; i++){
                              if(Math.floor(x)&gt;=(60*i) &amp;&amp; Math.floor(x)&lt;(60*(i+1))) {
                                  sec = Math.floor(x) - (60*i);
                                  sec = sec &lt;10 ? '0'+sec:sec;
                              }
                          }
                      }else{
                          sec = Math.floor(x);
                          sec = sec &lt;10 ? '0'+sec:sec;
                      }
                  } 
   
                  get_sec (currentTime,sec);
   
                  // change currentTime DOM
                  currTime.innerHTML = min +':'+ sec;
   
                  // define minutes duration
                  let min_d = (isNaN(duration) === true)? '0':
                      Math.floor(duration/60);
                  min_d = min_d &lt;10 ? '0'+min_d:min_d;
   
   
                  function get_sec_d (x) {
                      if(Math.floor(x) &gt;= 60){
                           
                          for (var i = 1; i&lt;=60; i++){
                              if(Math.floor(x)&gt;=(60*i) &amp;&amp; Math.floor(x)&lt;(60*(i+1))) {
                                  sec_d = Math.floor(x) - (60*i);
                                  sec_d = sec_d &lt;10 ? '0'+sec_d:sec_d;
                              }
                          }
                      }else{
                          sec_d = (isNaN(duration) === true)? '0':
                          Math.floor(x);
                          sec_d = sec_d &lt;10 ? '0'+sec_d:sec_d;
                      }
                  } 
   
                  // define seconds duration
                   
                  get_sec_d (duration);
   
                  // change duration DOM
                  durTime.innerHTML = min_d +':'+ sec_d;
                       
              };
   
              // Event listeners
              playBtn.addEventListener('click', () =&gt; {
              const isPlaying = musicContainer.classList.contains('play');
   
              if (isPlaying) {
                  pauseSong();
              } else {
                  playSong();
              }
              });
   
              // Change song
              prevBtn.addEventListener('click', prevSong);
              nextBtn.addEventListener('click', nextSong);
   
              // Time/song update
              audio.addEventListener('timeupdate', updateProgress);
   
              // Click on progress bar
              progressContainer.addEventListener('click', setProgress);
   
              // Song ends
              audio.addEventListener('ended', nextSong);
   
              // Time of song
              audio.addEventListener('timeupdate',DurTime);
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The songs are .mp3 files whose names are stored in the variable songs[]; Where is the source of the problem?</p>