Count up and down buttons

Use two buttons to increase or decrease a number while keeping the current value visible and understandable.

What you will learn

How to update a number from two click handlers
How to set a lower and upper limit
How to label controls clearly

Example

<button id="down" type="button">−</button>
<output id="count" aria-live="polite">0</output>
<button id="up" type="button">+</button>

let count = 0;
const output = document.querySelector('#count');
const render = () => { output.value = count; output.textContent = count; };
document.querySelector('#up').addEventListener('click', () => { count += 1; render(); });
document.querySelector('#down').addEventListener('click', () => { count -= 1; render(); });

aria-live="polite" lets assistive technology receive updates without interrupting the user. Add limits when negative or very large values are not meaningful.