2

Столкнулся с проблемой анимации кнопки.
Мне необходимо сделать чтобы при клике кнопка меняла цвет, при повторном нажатии меняла на дефолт. Что-бы было понятнее, это кнопка "добавить товар в корзину" и "добавить товар в избранное". Вот пример как я пытался это осуществить:

if (json['success']) {
  let body = document.getElementsByClassName('heart1').onclick = function() {
    let color = ['#000', '#333'];
    if (body.style.color != color[0]) {
      body.style.color = color[0];
    } else {
      body.style.color = color[1];
    }
  }
}
2
  • 2
    Вчитайтесь в название getElementSByClassName .... А onclick применяется на один элемент 10 фев 2022 в 6:02
  • да, я понимаю, но по какому методу производить поиск элемента? допустим у меня на странице множество товаров и мне необходимо, что-бы при клике на корзину окрашивался только этот значок. 10 фев 2022 в 6:43

2 ответа 2

1

Всё намного легче чем вы думаете.
Вот пример кода, надеюсь помог вам.


Быстро объясню, `btns` будет сохранять в себя все найденные элементы с классом `btn-add-cart`, с помощью фора мы добавляем события onclick для каждого элемента. При нажатия на кнопку с классом `btn-add-cart` у нас добавляется класс `active` для даного элемента если его нет, а если он есть то удаляет его.

const btns = document.querySelectorAll(".btn-add-card");

for(var i = 0; i < btns.length; i++){
  btns[i].addEventListener("click", function(){
    this.classList.toggle("active");
  })
}
.btn{
  padding: 12px 16px;
  border: 2px solid black;
  cursor: pointer;
  transition: .5s;
}

.btn:hover{
  color: white;
  background-color: black;
}

.active{
  border-color: red;
  color: red;
  background-color: black;
}
<button class="btn btn-add-card">Добавить в корзину</button>

<button class="btn btn-add-card">Добавить в корзину</button>

<button class="btn btn-add-card">Добавить в корзину</button>

Вот что у меня получилось, не знаю почему но тут этот код не будет работать так что лучше запустить в своём редакторе.

const btns = document.querySelectorAll(".btn-add-card");

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    this.classList.toggle("active");

    if (window.localStorage.getItem(this.id) === null) {
      window.localStorage.setItem(this.id, "active");
    } else {
      window.localStorage.removeItem(this.id);
    }
  })
}

var keys = Object.keys(localStorage);
for (var i = 0; i < keys.length; i++) {
  document.getElementById(keys[i]).classList.toggle("active");
}
.btn {
  padding: 12px 16px;
  border: 2px solid black;
  cursor: pointer;
  transition: .5s;
}

.btn:hover {
  color: white;
  background-color: black;
}

.active {
  border-color: red;
  color: red;
  background-color: black;
}
<button class="btn btn-add-card" id="btn-add-cart1">Добавить в корзину</button>

<button class="btn btn-add-card" id="btn-add-cart2">Добавить в корзину</button>

<button class="btn btn-add-card" id="btn-add-cart3">Добавить в корзину</button>

6
  • Спасибо большое, сейчас попробую 10 фев 2022 в 7:17
  • Как сделать так, чтобы при обновлении страницы сохранялось выделение? 10 фев 2022 в 7:28
  • @ДмитрийСоколов это уже делается через localStorage, тут уже потяжелее
    – Miha
    10 фев 2022 в 7:31
  • 2
    @ДмитрийСоколов "Как сделать так, чтобы при обновлении страницы сохранялось выделение?" Этого не было изначально в вопросе. Менять вопрос, когда уже дан ответ-плохая практика. Отвечающий может попасть в нежелательную ситуацию, когда ответ будет не соответствовать измененному вопросу. Поэтому нужно принять этот ответ и задать новый вопрос в отдельном топике. 10 фев 2022 в 8:11
  • @ДмитрийСоколов прошу посмотреть, я обновил ответ, но заранее предупреждаю тут код не будет работать, не знаю почему
    – Miha
    10 фев 2022 в 8:21
0

getElementsByClassName - Возвращает HTMLCollection дочерних элементов, а значит нужен цикл для обхода коллекции и установления им стиля. Или извращаться через getElementsByClassName('heart1')[0]

let hearts = `getElementsByClassName('heart1')`;

for (let i = 0; i < hearts.length; i++) {
    hearts[i].onclick = function(){
        alert("Finaly!");
    }
};

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.