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.

What am I doing wrong here?

This is my full code :

The problem might e from initAudio(prev) and initAudio(next) but I am not sure where to look exactly.

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.

Also think the part of the code with the issue is :

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', () => {
  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', () => {
  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');

<!-- PLAYER LIST -->
<ul class="player__list">
  <li class="player__list__track" song="alan-walker-faded.mp3" cover="cover1.jpg" artist="Alan Walker" songtitle="Faded">Faded</li>
  <li class="player__list__track" song="avicii-levels.mp3" cover="cover2.jpg" artist="Avicii" songtitle="Levels">Levels</li>
  <li class="player__list__track" song="bastille-pompeii.mp3" cover="cover3.jpg" artist="Bastille" songtitle="Pompeii">Pompeii</li>
  <li class="player__list__track" song="imagine-dragons-radioactive.mp3" cover="cover4.jpg" artist="Imagine Dragons" songtitle="Radioactive">Radioactive</li>
  <li class="player__list__track" song="luis-fonsi-despacito.mp3" cover="cover5.jpg" artist="Luis Fonsi" songtitle="Despacito">Despacito</li>
  <li class="player__list__track" song="maroon5-animals.mp3" cover="cover6.jpg" artist="Maroon 5" songtitle="Animals">Animals</li>
  <li class="player__list__track" song="the-verve-bittersweet-symphony.mp3" cover="cover7.jpg" artist="The Verve" songtitle="Bittersweet Symphony">Bittersweet Symphony</li>
</ul>

<!-- PLAYER CONTENT -->
<div class="player__content">
  <div class="player__content__image">
    <img class="cover">
  </div>
</div>

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.

What am I doing wrong here?

This is my full code : https://codepen.io/anon/pen/rqrePo

The problem might e from initAudio(prev) and initAudio(next) but I am not sure where to look exactly.

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.

Also think the part of the code with the issue is :

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', () => {
  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', () => {
  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');

<!-- PLAYER LIST -->
<ul class="player__list">
  <li class="player__list__track" song="alan-walker-faded.mp3" cover="cover1.jpg" artist="Alan Walker" songtitle="Faded">Faded</li>
  <li class="player__list__track" song="avicii-levels.mp3" cover="cover2.jpg" artist="Avicii" songtitle="Levels">Levels</li>
  <li class="player__list__track" song="bastille-pompeii.mp3" cover="cover3.jpg" artist="Bastille" songtitle="Pompeii">Pompeii</li>
  <li class="player__list__track" song="imagine-dragons-radioactive.mp3" cover="cover4.jpg" artist="Imagine Dragons" songtitle="Radioactive">Radioactive</li>
  <li class="player__list__track" song="luis-fonsi-despacito.mp3" cover="cover5.jpg" artist="Luis Fonsi" songtitle="Despacito">Despacito</li>
  <li class="player__list__track" song="maroon5-animals.mp3" cover="cover6.jpg" artist="Maroon 5" songtitle="Animals">Animals</li>
  <li class="player__list__track" song="the-verve-bittersweet-symphony.mp3" cover="cover7.jpg" artist="The Verve" songtitle="Bittersweet Symphony">Bittersweet Symphony</li>
</ul>

<!-- PLAYER CONTENT -->
<div class="player__content">
  <div class="player__content__image">
    <img class="cover">
  </div>
</div>

• javascript

Share Follow edited Jan 6, 2020 at 21:09 hypertensy 23566 silver badges2323 bronze badges asked Oct 21, 2018 at 21:21 VincentWingsVincentWings 1111 gold badge11 silver badge33 bronze badges 5

• 1 x is probably undefined in initAudio(x) – Lance Pollard Commented Oct 21, 2018 at 21:22
• 1 You need to provide a minimal reproducible example that actually reproduces the problem. You never call initAudio so the error you describe doesn't occur. – Quentin Commented Oct 21, 2018 at 21:24
• cover.src = "img/covers/" + imgCover; BTW what and where is cover?. – zer00ne Commented Oct 21, 2018 at 22:33
• cover is the img tag, it should take the attribute cover from the li "the player__list__track" – VincentWings Commented Oct 21, 2018 at 22:46
• You are right, cover was not defined (targeting the wrong class) – VincentWings Commented Oct 21, 2018 at 22:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can show how get element?

Example (working):

var element = document.getElementsByTagName("li")[0].getAttribute("class");

Example (not working becouse is array):

var element = document.getElementsByTagName("li").getAttribute("class");

I think this block is not working.. your next element is undefined. your list has no class name for getting active element. You adding active element in initAudio method but its first line gets error for element is null.

// Init Audio
function initAudio(element) {
  let song = **element**.getAttribute("song");


 let next = $('.player__list__track.active').next();
  if (next.length == 0) {
    next = $('.player__list__track:first-child');
  }