Build Your Own Counter Widgets Using JavaScript and HTML

Share this article

Building forms can be repetitive work. Often, particular form elements appear consistently across a wide range of forms. These elements lend themselves to creation as components that can be re-used in different forms applications.

One such recurring requirement of forms is the numeric field. Many forms include at least one field that can accept numeric values that occur within a certain range and are rounded to whole numbers (i.e. no decimals are allowed).

Rich-client applications have such a widget — a text field followed by “up” and “down” arrows that allow users to increase or decrease the field’s value. VB.NET calls this widget NumericUpDown.

To provide this functionality in plain HTML, we could use a drop-down list that contained all the possible values as options. This solution has several drawbacks, though:

  • If you need the user to choose from a wide range of numbers, the drop-down list can become very long. Users may have to scroll through the list and spend a lot of time to reach the value they want.
  • You need a huge amount of markup to generate a drop-down.

A better option is to allow users to enter the value into a simple text field, and validate their entries on the back-end.

We need to use back-end validation, as we cannot rely on the availability of JavaScript on the users’ systems. However, we can use JavaScript to avoid frustrating page reloads, and to turn the simple text field into a “counter” widget.

The field in the demonstration page is enhanced by a script that creates links to increase or decrease the field value when Javascript is available. For access to all the code presented in this article, download the code archive here.

How It Works

To achieve the desired functionality, all we need to do is to embed the file createcounter.js in our HTML document:

<script type="text/javascript" src="createcounter.js"></script>

We also need to add a special ID to each text field that we want to become a counter:

<input type="text" size="3" name="passengers_ctr_1_12" id="passengers_ctr_1_12" value="1" />

(The name attribute is kept in the code to ensure backward compatibility.)

The syntax of the ID is as follows:

(any name)_ctr_(minimum value)_(maximum value) 
Allows integer values between 0 and 10 for foo
Allows integer values between -10 and 10 for bar
Allows integer values between 1 and 999 for baz

Instead of the ID, we could use a class name or a bespoke attribute with a proper namespace. Using the ID, however, enables us to replicate this same validation on the back end, for example, in PHP.

Some developers might frown upon this mixing of markup and business logic, but it saves us from needing to replicate the rules from the JavaScript code in the back end script.

The JavaScript automatically:

  • checks that the entry is a number, an integer, and within the specified range
  • checks the value of the counter element when the page is loaded
  • checks and increases the value when the increase link is clicked
  • checks and decreases the value when the decrease link is clicked
  • checks the value once the user has entered text and left the field

If the entry either is not a number, or is below the minimum value allowed, the script sets the value to the minimum. If the entry is above the maximum, the script sets it to the maximum.

Customise the Widget

The class counterlink is applied to the links generated through this solution. The links can therefore be customized via CSS. To customize the class name and displayed link text, set the variables as follows:

var linkclass='counterlink'; 
var addtext='+';
var subtext='-';
var addbefore=true;

The variable addbefore defines the location of the decreasing link. A value of true applies the link before the text field. A value of false defines it after the text field, next to the increasing link.

Drawbacks of the Solution

This is as far as HTML, CSS and JavaScript can take us while remaining mouse-independent. Real counter widgets allow users to increase and decrease values via the cursor keys, and accelerate the scrolling speed the longer the user keeps either arrow button depressed.

There may be a solution that allows this functionality in certain browser environments, but it is doubtful that it can be made to work across all modern browsers.

Frequently Asked Questions (FAQs) about Counter Widgets in JavaScript and HTML

How can I create a counter widget using JavaScript and HTML?

Creating a counter widget using JavaScript and HTML involves a few steps. First, you need to create an HTML element where the counter will be displayed. This can be a simple div element with a unique id. Next, you need to write a JavaScript function that will increment the counter value. This function can be triggered by various events like a button click or page load. Finally, you need to update the HTML element with the new counter value using JavaScript’s innerHTML property.

What are some common uses of counter widgets?

Counter widgets are versatile and can be used in various ways on a website. They can be used to display the number of visitors to a site, the number of items in a shopping cart, the countdown to a special event, or the progress towards a fundraising goal. They can also be used in games or quizzes to keep track of scores or time.

Can I customize the look of my counter widget?

Yes, you can customize the look of your counter widget using CSS. You can change the font, color, size, and background of the counter. You can also add animations or transitions to make the counter more visually appealing.

How can I add a counter widget to my website?

To add a counter widget to your website, you need to include the HTML element and the JavaScript function in your webpage’s code. The HTML element should be placed where you want the counter to appear on the page. The JavaScript function can be included in a script tag in the head section of the page or in an external JavaScript file.

Can I use a counter widget on a static website?

Yes, you can use a counter widget on a static website. Since the counter is implemented using JavaScript, it can run on the client side, which means it doesn’t require any server-side processing. However, keep in mind that the counter value will not be persistent across different sessions or users.

How can I make my counter widget responsive?

To make your counter widget responsive, you can use CSS media queries. These allow you to apply different styles depending on the screen size. For example, you can make the font size of the counter smaller on smaller screens.

Can I use a counter widget without JavaScript?

While JavaScript is commonly used to create dynamic counter widgets, it is possible to create a simple counter widget without JavaScript using HTML and CSS. However, this counter will not be dynamic and will not update in real time.

How can I test my counter widget?

You can test your counter widget by running your webpage in a web browser. You should check if the counter increments correctly and if it displays correctly on different screen sizes. You can also use developer tools to debug your JavaScript code.

Can I use a pre-made counter widget?

Yes, there are many pre-made counter widgets available that you can use. These widgets come with their own styles and functionalities, and you can usually customize them to fit your needs. However, keep in mind that using a pre-made widget may not offer as much flexibility as creating your own.

How can I make my counter widget accessible?

To make your counter widget accessible, you should ensure that it is keyboard accessible and that it has proper contrast for visibility. You should also provide alternative text for screen readers.

Christian HeilmannChristian Heilmann
View Author

Chris Heilmann is a Senior Program Manager at Microsoft and literally wrote the handbook on developer evangelism. He spends a lot of time speaking at conferences, blogging and helping people understand and make others understand technology better. You can follow him on Twitter and read his blog.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week