CODEWITHSUNDEEP
javascript
VincentWings
VincentWings

Reputation: 11

element.getAttribute is not a function

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 come 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>

Upvotes: 1

Views: 24159

Answers (2)

Mert Cengiz
Mert Cengiz

Reputation: 11

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');
  }

Upvotes: 0

Jarek Wichrowski
Jarek Wichrowski

Reputation: 256

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");

Upvotes: 2

Related Questions