Кнопка Like

@RodionKr1 · Регистрация: 16.03.2020

Author24 — интернет-сервис помощи студентам

Снова беда

: нужно сделать так, чтобы кнопка Нравится после нажатия меняла цвет, а при повторном нажатии менялась к исходному значению. Еще она почему-то не входит в отдельную карточку (см. код html). Весь код уже есть, но почему-то ничего не происходит при нажатии. И еще, если кто проявит милость царскую, то подскажите, как карточки с отмеченным лайком в отдельную группу помещать?
Вот код:

HTML5

<!DOCTYPE html>
<html>
<head>
  <html lang="ru">
  <title>Сайт Lora_Knit</title>
  <meta charset="utf-8">
  <meta name="description" content="This website is my first website.">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="script.js"></script>
  <link rel="shortcaticon" type="image/x-icon" href="images/favico.ico.gif">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="allback">
  <header>
    <h1>Сайт</h1>
    <h3>.</h3>
    <h3>Онлайн магазин</h3>
  </header>
  <main>
    <div class="lefts">
      <div class="overlay">
        <nav>
          <ul>
            <li><div class="nav"><a href="index.html">Главная</a></div>
            <div class="nav"><a href="onl_mag.html">Онлайн-магазин</a></div>
            <div class="nav"><a href="cont.html">Контакты</a></div>
            <div class="nav"><a href="help.html">Помощь</a></div></li>
          <li><form>
                <input type="search" name="q" placeholder="Введите название изделия...">
                <input type="submit" value="Поиск">
              </form></li>
          </ul>
       </nav>
      </div>
    </div>
    <section>
      <h2>Онлайн-магазин</h2>
    <div class="product">
      <img src="images/favico.ico.gif">
      <h3>Пальто</h3>
      <p>Идеальная одежда для коня.</p>
      <button>Нравится</button>
    </div>
    <div class="product">
      <h3>Пальто</h3>
      <p>Идеальная одежда для коня.</p>
      <button>Нравится</button>
    </div>
    <div class="product">
      <h3>Пальто</h3>
      <p>Идеальная одежда для коня.</p>
      <button>Нравится</button>
    </div>
    <div class="product">
      <h3>Пальто</h3>
      <p>Идеальная одежда для коня.</p>
      <button>Нравится</button>
    </div>
    </section>
  </main>
</div>
</body>
</html>

Javascript

var isClicked = false;
var button = document.getElementsByTagName('button')[0];
button.onclick = function() {
  if (isClicked) {
    button.classList = '';
isClicked = false;
  } else {
    button.classList.add('clicked');
    isClicked = true;
  }
};

CSS

button {
     width: 100px;
     height: 40px;
     border: 2px solid black;
     background-color: white;
     position: absolute;
     outline: none;
     font-family: 'Arial Narrow', sans-serif;
     font-size: 20px;
}
button:hover {
  cursor: pointer;
  box-shadow: 4px 4px crimson;
}
.clicked {
  background-color: black;
  color: white;
}

@DrType · 13.04.2020, 21:04

Странно, сейчас первая кнопка Нравится ведёт себя именно так, как требуется... Если Вы хотите чтобы все кнопки Нравится вели себя именно так, то

Javascript

for (let button of document.querySelectorAll("section button")) {
  button.addEventListener("click", function () {
    this.classList.toggle("clicked");
  });
}

Добавлено через 5 минут
А карточкам с лайком можно задавать особый класс так:

Javascript

for (let button of document.querySelectorAll("section button")) {
  button.addEventListener("click", function () {
    this.classList.toggle("clicked");
  this.parentNode.classList.toggle('liked')});
}

Добавлено через 1 минуту

Не по теме:

Мне кажется, было бы неплохо менять текст на кнопке с «Нравится» на «Больше не нравится» и обратно при повторном нажатии, а то как-то нелогично?..

@RodionKr1 · 14.04.2020, 10:42 **[ТС]**

а куда вставлять код? я просто добавил его в конец и ничего не работает кроме первой кнопки..

@RodionKr1 3 / 3 / 1 Регистрация: 16.03.2020 Сообщений: 46
	14.04.2020, 10:42 [ТС]	3
	а куда вставлять код? я просто добавил его в конец и ничего не работает кроме первой кнопки.. 0

Кнопка Like

Решение