Добавить и убрать backgroundImage по нажатию

Question

play.addEventListener("click", () => {
  if (playTest.style.backgroundImage === 'url(img/pause.png)' ){
    playTest.style.backgroundImage = '';
  }
  else {
    playTest.style.backgroundImage = 'url(img/pause.png)';
  }
});

Изначально у playTest backgroundImage = play.png
В первой итерации при нажатии должно не проходить проверку и добавлять (img/pause.png), на следующий клик добавлять пустой backgroundImage, тем самым давая работать изначальному, но у меня почему-то не применяется пустой bgImg, либо любой другой с рандомными значениями.

Answer 1

Я бы советовал завязать смену картинки на CSS, а через JS менять класс - так удобнее, я считаю.

let play = document.getElementById('play');
play.addEventListener("click", function (e) {
  if(e.target.classList.contains('-play')) {
    e.target.classList.remove('-play');
    e.target.classList.add('-pause');
  } else {
    e.target.classList.remove('-pause');
    e.target.classList.add('-play');
  }
  return false;
});

#play {
  display: block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

#play.-play {
  background-image: url('//i.imgur.com/0K47nDu.png');
}

#play.-pause {
  background-image: url('//i.imgur.com/KVOlqKD.png');
}

<div class="music-box-2">
  <a href="#" id="play" class="musicIcon -play"></a>
</div>

БЛОГ НА HUSL

Добавить и убрать backgroundImage по нажатию

Ответы (1 шт):