How to create or reset counters with JavaScript?

Javascript Web Development Front End Scripts

To create counters, use the counterReset property in JavaScript. You can try to run the following code to create or reset one or more counters with JavaScript −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         h2:before {
            counter-increment: section;
            content: counter(section) " Quiz ";
         }
      </style>
   </head>
   <body>
      <h1>Quizzes</h1>
      <p>Change the counterIncrement</p>
      <h2>Ruby</h2>
      <h2 id="myID">Java</h2>
      <h2>PHP</h2>
      <h2>Perl</h2>
      <button onclick="display()">Reset Counter</button>
      <script>
         function display() {
            document.body.style.counterReset = "section";
         }
      </script>
   </body>
</html>

Karthikeya Boyini

Published on 27-Feb-2018 12:00:58

Previous Page Print Page