Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesUse a native HTML <button> and update a number stored in JavaScript whenever it is activated. For an instant change, write the new value to the page; for a smooth count-up, animate a separate display value with requestAnimationFrame().
Make a number increase on each click
This plain JavaScript example updates the count immediately. The button works with mouse, keyboard, and other standard button activation methods, while the <output> element presents the changing value.
As an Amazon Associate I earn from qualifying purchases.
<button id="add" type="button">Add</button>
<output id="count" aria-live="polite">0</output>
<script>
const add = document.querySelector('#add');
const output = document.querySelector('#count');
let value = 0;
add.addEventListener('click', () => {
value += 1;
output.value = value;
output.textContent = value;
});
</script>The variable value is the count the application actually owns. The event handler adds one and updates what the user sees. MDN’s click event guide demonstrates listening for button clicks and updating a count; its event.detail example is specifically about consecutive clicks on the same target, not a replacement for maintaining your own application state.
Add a smooth count-up animation
Keep the logical count separate from the number currently displayed. When a click changes the target, interpolate from the current display value to that target over a short duration. This lets a later click start from the in-progress display rather than jump backward.
#1 Best Overall
let value = 0;
let shown = 0;
let frame = null;
function animateTo(target) {
const startValue = shown;
const startTime = performance.now();
const duration = 300;
cancelAnimationFrame(frame);
function step(timestamp) {
const progress = Math.min((timestamp - startTime) / duration, 1);
shown = Math.round(startValue + (target - startValue) * progress);
output.textContent = shown;
if (progress < 1) {
frame = requestAnimationFrame(step);
}
}
frame = requestAnimationFrame(step);
}
add.addEventListener('click', () => {
value += 1;
animateTo(value);
});Here, output and add refer to the elements selected in the first example. The 300 milliseconds is an example duration; adjust it to suit the interface.
requestAnimationFrame() asks the browser to run a callback before a repaint. It is one-shot, so the callback requests another frame until the animation finishes. Using the callback’s timestamp to calculate progress keeps the duration tied to elapsed time rather than the number of frames, which matters on displays with different refresh rates. In most background tabs, browsers pause these callbacks; when frames resume, the timestamp-based calculation catches up instead of assuming every frame ran. See MDN’s requestAnimationFrame documentation and the W3C animation-frames algorithm.
Rank #2
Build the counter in React
In React, store the count in component state and render it from that state. Use the functional updater form so each queued click adds one to the latest state:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button type="button" onClick={() => setCount(c => c + 1)}>
Clicked {count} times
</button>
);
}React’s Quick Start uses this useState-and-onClick pattern. Each component instance keeps its own state. If the design also needs a tween, keep the React count authoritative and implement animation as a separate display layer; do not make the animated intermediate number the source of truth.
Choose the right counter for the job
| Need | Approach | What changes |
|---|---|---|
| Simple page counter | Plain DOM event listener | JavaScript variable and page text update on each click. |
| Counter in a React component | useState and an onClick handler |
React state changes and React renders the displayed count. |
| Visible counting motion | requestAnimationFrame() tween |
A display value moves toward the target over time. |
| Campaign or ad measurement | Analytics counter with defined event rules | May record a capped event once per impression or a cumulative event on every call, rather than every UI activation. |
Google Web Designer distinguishes capped counters, which record at most once per impression, from cumulative counters, which record every call. Those measurement rules are different from a local UI count that usually adds one per activation. Define the event semantics before using analytics data as the number shown in an interface.
Quick Recap
Rank #4
Make the interaction accessible
- Use a real
<button>, not a clickable<div>. A semantic button supplies expected mouse and keyboard behavior; a generic element requires extra keyboard interaction handling. See web.dev’s JavaScript accessibility guidance. - Give the changing value a useful accessible name. A nearby text label or a properly associated label can make its purpose clear.
- Use
aria-live="polite"when assistive technology should be notified of the updated result without interrupting the current task. Avoid exposing every rapid animation frame as a live announcement; frequent updates can overwhelm users. - Do not disable the button just because the number is animating. Disable it only if the application has a real constraint that prevents another activation.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
