The purist way to do this would be to add event handlers to the button, to increment a counter number in JavaScript.
JavaScript increment a counter examples
HTML examples code with ‘Plain‘ JavaScript:-
1. Increment number variable value
Create a JavaScript variable and increment that variable when press a button (without submit the form).
Counterexample: how to increment a JavaScript variable based on a web page button press event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <script type="text/javascript"> var counter = 0; function increment(){ counter++; console.log(counter); } </script> </head> <body> <input type="button" onClick="increment()" value="Increment"/> </body> </html> |
Output:
2. Increment element value
Let’s make a counter variable that increases the value when you click a button. We are using two elements in HTML.
First text and second id button, on clicking a button text input will increase current value by one.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <form> <input type="text" id="number" value="0"/> <input type="button" onclick="incrementValue()" value="Increase" /> </form> <script> function incrementValue() { var value = parseInt(document.getElementById('number').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number').value = value; } </script> </body> </html> |
Output:
Do comment if you have any doubts and suggestions on this topic.
Note: All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.