Не меняется картинка по клику на кнопку

Question

Почему не работает кнопка?

По идее при клике должна меняться картинка с обычной кнопки на красную, но при клике ничего не происходит:

const LikeButton = (e) => {
    e.target.classList.toggle('element-grid__like-button_active');
}
document.querySelector('.element-grid__like-button').addEventListener('click', LikeButton);

.element-grid__like-button {
    background-image: url(../../../images/like-pic.svg);
    padding: 0;
    margin-top: 6px;
    width: 21px;
    height: 20px;
    background-color: white;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.element-grid__like-button:hover {
    opacity: 0.8;
    transition: all 1s ease-in;
}

.element-grid__like-button_active {
    background-image: url(../../../images/likeactivepic.PNG);
}

<button class="element-grid__like-button" type="button"></button>

javascript

Vasily · Answer

Ваш код в целом работает корректно, я немного упростил для того что бы это проиллюстрировать:

const LikeButton = e => {
  e.target.classList.toggle("element-grid__like-button_active")
}

document.querySelector(".element-grid__like-button").addEventListener("click", LikeButton)

.element-grid__like-button {
  padding: 0;
  margin-top: 6px;
  width: 21px;
  height: 20px;
  background-color: blue;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.element-grid__like-button_active {
  background-color: red;
}

<button class="element-grid__like-button" type="button"></button>

Евгений · Answer

Проверь путь к картинки. С ним явно что-то не так.
Вот, я взял картинку из гугла:
.element-grid__like-button {
    background-image: url(../../../images/like-pic.svg);
    padding: 0;
    margin-top: 6px;
    width: 21px;
    height: 20px;
    background-color: white;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.element-grid__like-button:hover {
    opacity: 0.8;
    transition: all 1s ease-in;
}

.element-grid__like-button_active {
    color:red;
    background-image: url(https://pp.vk.me/c628016/v628016653/21caf/gASxIGB0xY8.jpg);
}

Не меняется картинка по клику на кнопку

2 Answers

Add your own answers!

Ask a Question