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.
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
$(".button1").click(function() {
var v = +$(".val").html();
$(".val").html(v > 2 ? 0 : v + 1);
});
$(".button2").click(function() {
var v = +$(".val").html();
$(".val").html(v > 2 ? 0 : v + 1);
});body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row ">
<div class="col-md-6">
<br />
<label for="buttons" class="val">0</label>
<br />
<input class="btn btn-primary button1" type="button" value="button1">
<input class="btn btn-primary button2" type="button" value="button2">
</div>
</div>
</div>
</body>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);
}