TGViewer
Логово верстальщика Логово верстальщика @webdevlair · 7.9K subscribers
Post #3032 1.42K
👩‍💻 Интерактивный счётчик с кнопками увеличения и уменьшения

Создайте интерактивный счётчик с двумя кнопками: "Увеличить" и "Уменьшить". Счётчик должен отображать текущее значение, которое обновляется при нажатии на кнопки.

Ожидаемое поведение:

• По умолчанию значение счётчика равно 0.
• Кнопка "Увеличить" увеличивает значение счётчика на 1.
• Кнопка "Уменьшить" уменьшает значение счётчика на 1.
• Значение счётчика никогда не становится отрицательным.

Решение задачи🔽

<div>
<button id="decreaseButton">Уменьшить</button>
<span id="counter">0</span>
<button id="increaseButton">Увеличить</button>
</div>

const counter = document.getElementById('counter');
const decreaseButton = document.getElementById('decreaseButton');
const increaseButton = document.getElementById('increaseButton');

let count = 0;

decreaseButton.addEventListener('click', () => {
if (count > 0) {
count -= 1;
counter.textContent = count;
}
});

increaseButton.addEventListener('click', () => {
count += 1;
counter.textContent = count;
});
More from @webdevlair
  1. Oct 16, 2026Deno уходит в Cloudflare. С приветом от Node Спойлер: в Cloudflare команда Deno едет не ко…
  2. Oct 16, 2026Post #4695
  3. Oct 16, 2026Как вставлять иконки в веб, не трогая HTML Ли Веру показывает трюк: иконки настраиваются ч…
  4. Oct 16, 2026⚡️ В сети начали массово сливать IT-курсы и книги известных онлайн школ Вот отсортированна…
  5. Oct 15, 2026Post #4692
  6. Oct 14, 2026Автор ковыряет вёрстку с тех самых времён, когда Chrome был ещё первой версией, а не моноп…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →