title: element.getAttribute is not a function
body: <p>I would like to get the attributes of "element" into variables and I get the message "element.getAttribute is not a function" in the console.</p>
  
  <p>What am I doing wrong here?</p>
  
  <p>This is my full code :
  <a href="https://codepen.io/anon/pen/rqrePo" rel="nofollow noreferrer">https://codepen.io/anon/pen/rqrePo</a></p>
  
  <p>The problem might come from initAudio(prev) and initAudio(next) but I am not sure where to look exactly.</p>
  
  <p>When I click on previous and next, it is stopping at the first track because it is keeping the previous .active class (this class should be only on one track),
  it is probably making conflict in the code.</p>
  
  <p>Also think the part of the code with the issue is :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let next = $('.player__list__track.active').next();
  if (next.length == 0) {
     next = $('.player__list__track:first-child');
  }
  // Init Audio
  function initAudio(element) {
    let song = element.getAttribute("song");
    const theSong = document.querySelector('.player__bottom__infos__song');
    theSong.textContent = songTitle;
  
    let imgCover = element.getAttribute("cover");
    let artistName = element.getAttribute("artist");
  
    // Create audio object
    audio = new Audio('media/' + song);
  
    // Infos
    artist.textContent = artistName;
    song.textContent = songTitle;
  
    // Cover
    //cover.setAttribute("src", "img/covers/" + imgCover);
  
    // Playlist
    track.classList.remove('active');
    element.classList.add('active');
  }
  
  // Previous
  prevButton.addEventListener('click', () =&gt; {
    audio.pause();
    let prev = $('.player__list__track.active').prev();
    if (prev.length == 0) {
      prev = $('.player__list__track:last-child');
    }
    initAudio(prev);
    audio.play();
    songDuration();
  });
  
  // Next
  nextButton.addEventListener('click', () =&gt; {
    audio.pause();
    let next = $('.player__list__track.active').next();
    if (next.length == 0) {
      next = $('.player__list__track:first-child');
    }
    initAudio(next);
    audio.play();
    songDuration();
  });
  
  const prevButton = document.querySelector('.player__bottom__controls__buttons__prev');
  const nextButton = document.querySelector('.player__bottom__controls__buttons__next');
  
  const artist = document.querySelector('.player__bottom__infos__artist');
  const theSong = document.querySelector('.player__bottom__infos__song');
  const cover = document.querySelector('.player__bottom__infos__cover');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- PLAYER LIST --&gt;
  &lt;ul class="player__list"&gt;
    &lt;li class="player__list__track" song="alan-walker-faded.mp3" cover="cover1.jpg" artist="Alan Walker" songtitle="Faded"&gt;Faded&lt;/li&gt;
    &lt;li class="player__list__track" song="avicii-levels.mp3" cover="cover2.jpg" artist="Avicii" songtitle="Levels"&gt;Levels&lt;/li&gt;
    &lt;li class="player__list__track" song="bastille-pompeii.mp3" cover="cover3.jpg" artist="Bastille" songtitle="Pompeii"&gt;Pompeii&lt;/li&gt;
    &lt;li class="player__list__track" song="imagine-dragons-radioactive.mp3" cover="cover4.jpg" artist="Imagine Dragons" songtitle="Radioactive"&gt;Radioactive&lt;/li&gt;
    &lt;li class="player__list__track" song="luis-fonsi-despacito.mp3" cover="cover5.jpg" artist="Luis Fonsi" songtitle="Despacito"&gt;Despacito&lt;/li&gt;
    &lt;li class="player__list__track" song="maroon5-animals.mp3" cover="cover6.jpg" artist="Maroon 5" songtitle="Animals"&gt;Animals&lt;/li&gt;
    &lt;li class="player__list__track" song="the-verve-bittersweet-symphony.mp3" cover="cover7.jpg" artist="The Verve" songtitle="Bittersweet Symphony"&gt;Bittersweet Symphony&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- PLAYER CONTENT --&gt;
  &lt;div class="player__content"&gt;
    &lt;div class="player__content__image"&gt;
      &lt;img class="cover"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>