javascript onclick increment number
jQuery Example
var $button = $('.increment-btn');
var $counter = $('.counter');
$button.click(function(){
$counter.val( parseInt($counter.val()) + 1 ); // `parseInt` converts the `value` from a string to a number
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="1" class="counter"/>
<button type="button" class="increment-btn">Increment</button>
'Plain' JavaScript Example
var $button = document.querySelector('.increment-btn');
var $counter = document.querySelector('.counter');
$button.addEventListener('click', function(){
$counter.value = parseInt($counter.value) + 1; // `parseInt` converts the `value` from a string to a number
}, false);
<input type="text" class="counter" value="1"/>
<button type="button" class="increment-btn">Increment</button>
In its most basic incarnation..
JavaScript:
<script>
var i = 0;
function buttonClick() {
document.getElementById('inc').value = ++i;
}
</script>
Markup:
<button onclick="buttonClick()">Click Me</button>
<input type="text" id="inc" value="0"></input>
- DEMO
Since you gave me nothing to start on, here is a simple example.
jsFiddle
Example implementation:
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
Example Html
<form>
<input type="text" id="number" value="0"/>
<input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
Yes! You can definitely use onclick
or you can also use addEventListener
to listen a click event. In this code sample the onclick
event is in action(use).
HTML code:
<div class="container">
<p><output id="output">0</output></p>
<p><button type="button" id="btn">Increment</button></p>
</div>
Javascript code:
(function() {
var button = document.getElementById("btn")
var output = document.getElementById("output")
var number
var counter
function init() {
// Convert string to primitve number using parseInt()
number = parseInt(output.innerText)
/**
* Start counter by adding any number to start counting.
* In this case the output starts from 0 so to immediately
* invoke the button to increment the counter add 1 to start
* counting in natural number (counting numbers).
*/ counter = number + 1
function increment() {
// Increment counter
value = counter++
output.innerText = value
}
// Output the increment value for every click
button.onclick = increment
}
window.onload = init
})()
Demo