I have two buttons with a single label like the below. The two buttons were independent.
<label for="buttons" class ="val">0</label>
<input class="btn btn-primary button1" type="button" value="button1" onclick="changeLabel()">
<input class="btn btn-primary button2" type="button" value="button2">
When I click the button1 1sttime, the Value in the label should be 1, for the 2nd time, the value in the label should be 2 and for the 3rd time, the value in the label should be 3. When I click the button1 for the 4th time, the value should again go back to 0. Like 0,1,2,3,0,1.....
The same should be the case for the button2 too. But, If i press the button1 2times. Then the Value in the label should be 2.At the same time, if I press the button2 for 3times the value in the label should change to 3 immediately.
Both the buttons, should be independent. The Values should be different for each buttons when they were clicked.
(".button1").click(function(){
var value = $('.val').html(parseInt($('.val').html()) 1);
});
$(".button2").click(function(){
$('.val').html(parseInt($('.val').html()) 1);
});
I couldn't do so. The value should return to 0 after clicking the buttons 3 times.
here is my codepen, https://codepen.io/Davi9/pen/LYLqWKx
could anyone please help?
Many thanks.
CodePudding user response：
If you want to reset the counter to 0 when it reach 3, then try this:
$(".button1").click(function() {
var v = $(".val").html();
$(".val").html(v > 2 ? 0 : v 1);
});
Demo
CodePudding user response：
Check the value of the label, if its greater than 3, set it to zero, somthing like
(".button1").click(function(){
incr();
});
$(".button2").click(function(){
incr();
});
function incr() {
var val = parseInt($('.val').html());
val=val 1;
if(val > 3)
val = 0;
$('.val').html(val);
}