Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to increment one or more counters with JavaScript?
In this tutorial, we will learn how to increment one or more counters with JavaScript.
In JavaScript, we can increment one or more counters in different approaches, and in this tutorial, we will see some of the approaches for doing this −
- Using loop iteration
- Using events
- Using setInterval() method
Increment Counters using Loop Iteration
Counters can be easily incremented by using loop iterations. In JavaScript, we have multiple loops like the "for" loop and the "while" loop. We can use any one of them to increment a counter value. Firstly, we need to set a limit for the counter variable; otherwise, the counter value will keep incrementing infinitely. Then we need to set up a loop that will keep incrementing the counter.
Users can follow the syntax below to increment counters using loop iteration in JavaScript.
Syntax
//counter variable let counter = 0; let limit = 10; while (counter < limit) { //incrementing the counter counter = counter + 1; // console.log(counter); }
In the above syntax, "counter" is the variable whose value starts at 0. The "limit" variable is the limit of the counter variable's value.
Example
In the below example, we have incremented one counter value using loop iteration. For every counter value change, we are outputting the counter's value on the web page. The user can use multiple counters similarly. We used a button click event to start the increment of the counter value.
<html> <body> <h3> Increment one or more counters with JavaScript using <i> Loop iteration </i> </h3> <button onclick = "start()"> Start Increment The Counter </button> <div id = "root" style = "margin-top: 10px;"> </div> <script> const root = document.getElementById('root') //counter variable let counter = 0 // limit of the counter variable's value const limit = 10 function start(){ root.innerHTML = '<b>Counter values are listed below:</b> <br/><br/>' //loop iteration to increment the counter while (counter < limit) { counter = counter + 1 root.innerHTML += 'Counter value became: ' + counter + '<br />' } } </script> </body> </html>
Increment Counters using Events
Counters can be incremented by using HTML events. In JavaScript, we have multiple events to execute a function that can be responsible for incrementing the counters. We can increment multiple counters using events. We will increment two counter values in this example using the button click event.
Users can follow the syntax below to increment counters using events in JavaScript.
Syntax
//HTML element that has the onclick attribute <button onclick = "increment()"> Increment Counter </button> //counter variable let counter = 0; //click event handler function function increment(){ counter = counter + 1 }
In the above syntax, "counter" is the counter variable whose value starts at 0. "increment" is the function responsible for incrementing the counter's value.
Example
In the below example, we have incremented multiple counter values using events for every counter value change. We used a two-button click event to increment the values of two counters.
<html> <body> <h3>Increment one or more counters with JavaScript using <i>Events</i></h3> <button onclick = "increment1()"> Increment Counter 1 </button> <button onclick = "increment2()"> Increment Counter 2 </button> <div id = "root1" style="margin-top: 10px;"> Counter 1 value: 0 </div> <div id = "root2" style="margin-top: 10px;"> Counter 2 value: 0 </div> <script> const root1 = document.getElementById('root1') const root2 = document.getElementById('root2') //counter variables let counter1 = 0 let counter2 = 0 function increment1(){ counter1 = counter1 + 1 root1.innerHTML = "Counter 1 value: " + counter1 } function increment2(){ counter2 = counter2 + 1 root2.innerHTML = "Counter 2 value: " + counter2 } </script> </body> </html>
Increment Counters using setInterval() Method
In some cases, a counter can be required to increment at a particular time interval, and in that case, incrementing the counter using the setInterval() method can be very useful. In the arguments, setInterval method takes a function and a time interval value in milliseconds. The setInterval() method executed that function after the given time interval.
Users can follow the syntax below to increment counters using JavaScript's setInterval() method.
Syntax
//counter variable let counter = 0; //setInterval method setInterval(() => { counter = counter + 1 console.log(counter); }, 1000);
In the above syntax, "counter" is the variable whose value starts at 0. We passed an arrow function to the setInterval () method, which will execute every 1000 millisecond interval, incrementing the counter value.
Example
In the below example, we have incremented a counter value using the setInterval() method. For every 1000 milliseconds or 1 second, the counter will increment.
<html> <body> <h3>Increment one or more counters with JavaScript using <i>setInterval()</i> method </h3> <div id="root" style="margin-top: 10px;">Counter value: 0</div> <script> const root = document.getElementById('root') //counter variables let counter = 0 setInterval(() => { counter = counter + 1 root.innerHTML = 'Counter value: ' + counter }, 1000); </script> </body> </html>
In this tutorial, we learned three ways to increment one or more counters with JavaScript. We used loop iterations, events, and the setInterval() method to increment a counter. Users can use any of these ways to increment a counter based on their requirements.
12K+ Views
