Как сменить bg-image при нажатии на элемент (JavaScript)

Question

Привет:) Новенький в этой сфере, так что не обессудьте. Верстаю что-то типа плеера, есть кнопка play и при нажатии, её сменяющая - pause. В интернете нашёл не одно решение, но что-то базовое и простое из того, что я пробовал, к сожалению, не подошло.

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

let playTest = document.querySelector('playTest');
let play = document.getElementById('play');
play.addEventListener("click", function () {
  document.playTest.style.backgroundImage = url('../img/pause.png');
});

Answer 1

Первая ошибка

let playTest = document.querySelector('playTest'); <-
let play = document.getElementById('play');
play.addEventListener("click", function () {
  document.playTest.style.backgroundImage = url('../img/pause.png');
});

В .querySelector и .querySelectorAll указывается селекторы, как в CSS, т.е. .class, #id, tag и т.п. Подробнее
Должно быть

let playTest = document.querySelector('.playTest');

Вторая ошибка

  let playTest = document.querySelector('.playTest');
  let play = document.getElementById('play');
  play.addEventListener("click", function () {
->  document.playTest.style.backgroundImage = url('../img/pause.png');
  });

Вы вначале уже нашли этот элемент в documentе, повторный поиск не нужен
Должно быть:

playTest.style.backgroundImage = url('../img/pause.png');

Третья ошибка

let playTest = document.querySelector('.playTest');
let play = document.getElementById('play');
play.addEventListener("click", function () {
  playTest.style.backgroundImage = url('../img/pause.png'); <-
});

Тут вы должны передать строку с CSS правилом.
Должно быть:

playTest.style.backgroundImage = 'url(\'../img/pause.png\')';

Четвёртая ошибка

Ну и когда вы "почините" код, запустите, вы столкнётесь с другой ошибкой, при нажатие на ссылку у вас скролл переместится наверх страницы из-за href="#" у вашей ссылки.
Варианта два: 1. переделать A в DIV (например). 2. запретить A выполнять переход по href атрибуту, его и рассмотрим:

let playTest = document.querySelector('playTest');
let play = document.getElementById('play');
play.addEventListener("click", function () {
  playTest.style.backgroundImage = 'url(\'../img/pause.png\')';
  return false; // Этого хватит, чтобы отменить переход
});

Демо кода

let playTest = document.querySelector('.playTest');
let play = document.getElementById('play');
play.addEventListener("click", function () {
  playTest.style.backgroundImage = 'url(\'//i.imgur.com/KVOlqKD.png\')';
  return false;
});

#play {
  display: block;
  width: 40px;
  height: 40px;
  background: url('//i.imgur.com/0K47nDu.png') no-repeat center center / contain;
}

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

БЛОГ НА HUSL