@fluki

Есть 4 псевдо-счетчика на странице. Как их рассинхронизировать?

Есть html код псевдо счетчика, который должен реагировать на нажатие кнопки (+1/-1).
Сам код работает, но нужно разместить несколько таких счетчиков на странице. При банальном дублировании работает только первый счетчик, а остальные не реагируют на клик.

1)Что нужно поменять в коде, чтобы работали все счетчики одновременно на одной странице? И при нажатии на каждом цифра прибавлялась/убавлялась.
2)И как можно сделать, чтобы кликнутая кнопка окрашивалась в другой цвет (на данный момент она только выделяется при наведении и щелчке, потом цвет возвращается в исходный)
<div class="likes" style="float: right; padding-left: 10px;"> 105 </div>

<div><button class="btn" style="color: #fff; border: none; float: right; ">♥</button></div>

<onload="startTime()">
<script>
const btn = document.querySelector('.btn');
let like = true,
likeCount = document.querySelector('.likes').innerHTML;
btn.addEventListener('click', () => {
likeCount = like ? ++likeCount : --likeCount;
like = !like;
document.querySelector('.likes').innerHTML = likeCount;
});
</script>
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега HTML
Верставший фронтендер
У Вас счётчик в глобале висит, вот и "синхронизированно".
статьи по теме:
https://learn.javascript.ru/closures
https://learn.javascript.ru/closures-usage

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы