Article Categories

Selected Reading

How to create or reset counters with JavaScript?

Javascript Web Development Front End Scripts

CSS counters provide a way to automatically number elements on a webpage. In JavaScript, you can create or reset counters using the counterReset property to control counter initialization and reset points.

How CSS Counters Work

CSS counters use three main properties:

counter-reset - Creates or resets a counter
counter-increment - Increments the counter value
counter() - Displays the counter value in content

Basic Counter Example

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            counter-reset: section;
        }
        h2:before {
            counter-increment: section;
            content: counter(section) " Quiz ";
        }
    </style>
</head>
<body>
    <h1>Programming Quizzes</h1>
    <h2>Ruby</h2>
    <h2>Java</h2>
    <h2>PHP</h2>
    <h2>Perl</h2>
    <button onclick="resetCounter()">Reset Counter</button>
    
    <script>
        function resetCounter() {
            // Reset the counter back to 0
            document.body.style.counterReset = "section";
        }
    </script>
</body>
</html>

JavaScript Counter Reset Methods

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            counter-reset: item;
        }
        .counter-item:before {
            counter-increment: item;
            content: counter(item) ". ";
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <div class="counter-item">First item</div>
        <div class="counter-item">Second item</div>
        <div class="counter-item">Third item</div>
    </div>
    
    <button onclick="resetToZero()">Reset to 0</button>
    <button onclick="resetToFive()">Reset to 5</button>
    
    <script>
        function resetToZero() {
            document.getElementById('container').style.counterReset = 'item';
        }
        
        function resetToFive() {
            document.getElementById('container').style.counterReset = 'item 5';
        }
    </script>
</body>
</html>

Multiple Counters

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            counter-reset: chapter section;
        }
        .chapter:before {
            counter-increment: chapter;
            content: "Chapter " counter(chapter) ": ";
        }
        .section:before {
            counter-increment: section;
            content: counter(chapter) "." counter(section) " ";
        }
    </style>
</head>
<body>
    <div class="chapter">Introduction</div>
    <div class="section">Overview</div>
    <div class="section">Prerequisites</div>
    
    <div class="chapter">Getting Started</div>
    <div class="section">Installation</div>
    <div class="section">Configuration</div>
    
    <button onclick="resetCounters()">Reset All Counters</button>
    
    <script>
        function resetCounters() {
            // Reset multiple counters at once
            document.body.style.counterReset = 'chapter section';
        }
    </script>
</body>
</html>

Key Points

counterReset can reset a counter to 0 or any specified value
Syntax: counter-reset: name (resets to 0) or counter-reset: name value
Multiple counters: counter-reset: counter1 counter2 counter3
JavaScript can dynamically modify counter behavior using the style.counterReset property

Conclusion

CSS counters with JavaScript provide powerful automatic numbering capabilities. Use counterReset to initialize or reset counter values, enabling dynamic content numbering in web applications.

karthikeya Boyini

Updated on: 2026-03-15T23:18:59+05:30

975 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next