лайк изменение цвета

Question

есть кнопка лайкпри нажатия должна заполнится черная цветом подскажите как это сделать? я не совсем понимаю реализацию

Answer 1

Вам нужен дополнительный класс. например

CSS

.like-active{
  color: black
}

Js

let $like = document.querySelector('selector');
$like.addEventListener( 'click', () => 
$like.classList.toggle('like-active') )

Answer 2

Вот рабочий код.
При нажатии на кнопку, событие лайка сработает только на этой конкертной кнопке.
Так-же нужно изменить id для каждой кнопки это нужно будет для бэкенда.
Вставьте JS код, изменив на свои классы.

const doc = document
const log = console.log

const aria = {
    label: {
        true: "Отправить реакцию «нравится»",
        false: "Отменить реакцию «нравится»"
    }
}

doc.addEventListener("click", ({ target }) => {
    const likeBtn = target.closest(".selector")

    if (!likeBtn) return;
    likeBtn.ariaPressed = likeBtn.ariaPressed === "true" ? "false" : "true";
    likeBtn.ariaLabel = aria.label[likeBtn.ariaPressed];

    log(
        `Отправляю запрос, что кто-то лайкнул пост с id ${likeBtn.dataset.id}`
    )
})

body {
  display: flex;
}

.selector {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: orange;
  cursor: pointer;
}

.selector + .selector {
  margin-left: 15px;
}

.selector[aria-pressed=true] {
    opacity: 1;
    background-color: black;
}

.selector[aria-pressed=true] svg {
    fill: red;
}

.selector[aria-pressed=true] svg path {
    stroke: white;
}

<button class="selector" aria-label="Отправить реакцию «нравится»" aria-pressed="false" data-id="0">
    <svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8398 2.39496C13.013 -0.169205 10.2871 2.03882 9.27755 
    3.46336C8.26797 2.03882 5.54163 -0.169205 2.71481 2.39496C-0.112011 
    4.95912 1.87349 8.80536 3.2196 10.408C4.22918 11.6544 6.85456 14.361  
    9.27755 15.2158C11.7005 14.361 14.3254 11.6544 15.335 10.408C16.6811 
    8.80536 18.6666 4.95912 15.8398 2.39496Z" stroke="black" 
    stroke-width="2" stroke-linejoin="round"/>
</svg>
</button>

<button class="selector" aria-label="Отправить реакцию «нравится»" aria-pressed="false" data-id="1">
    <svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8398 2.39496C13.013 -0.169205 10.2871 2.03882 9.27755 
    3.46336C8.26797 2.03882 5.54163 -0.169205 2.71481 2.39496C-0.112011 
    4.95912 1.87349 8.80536 3.2196 10.408C4.22918 11.6544 6.85456 14.361  
    9.27755 15.2158C11.7005 14.361 14.3254 11.6544 15.335 10.408C16.6811 
    8.80536 18.6666 4.95912 15.8398 2.39496Z" stroke="black" 
    stroke-width="2" stroke-linejoin="round"/>
</svg>
</button>

<button class="selector" aria-label="Отправить реакцию «нравится»" aria-pressed="false" data-id="2">
    <svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8398 2.39496C13.013 -0.169205 10.2871 2.03882 9.27755 
    3.46336C8.26797 2.03882 5.54163 -0.169205 2.71481 2.39496C-0.112011 
    4.95912 1.87349 8.80536 3.2196 10.408C4.22918 11.6544 6.85456 14.361  
    9.27755 15.2158C11.7005 14.361 14.3254 11.6544 15.335 10.408C16.6811 
    8.80536 18.6666 4.95912 15.8398 2.39496Z" stroke="black" 
    stroke-width="2" stroke-linejoin="round"/>
</svg>
</button>

БЛОГ НА HUSL

лайк изменение цвета

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