Tengo two buttons con una single label como la siguiente. Los dos botones eran independientes .
<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"> Cuando hago clic en el botón 1 por primera 1sttime , el valor en la etiqueta debe ser 1 , por segunda vez, el valor en la etiqueta debe ser 2 y por 3rd time , el valor en la etiqueta debe ser 3 . Cuando hago clic en el button1 por 4th time , el valor debería volver a 0 . Como 0,1,2,3,0,1.....
Lo mismo debería ser el caso para el button2 también. Pero, si button1 el botón 1 2 2times . Entonces el Valor en la etiqueta debería ser 2 Al mismo tiempo, si button2 el botón 2 3times , el valor en la etiqueta debería cambiar a 3 inmediatamente.
Ambos botones deben ser independientes . Los valores deben ser diferentes para cada botón cuando se hizo clic en ellos.
(".button1").click(function(){ var value = $('.val').html(parseInt($('.val').html())+1); }); $(".button2").click(function(){ $('.val').html(parseInt($('.val').html())+1); }); No pude hacerlo. El valor debería volver a 0 después de hacer clic en los botones 3 times . aquí está mi codepen, https://codepen.io/Davi9/pen/LYLqWKx
¿alguien podría ayudar?
Muchas gracias.
Si desea restablecer el contador a 0 cuando llegue a 3 , intente esto:
$(".button1").click(function() { var v = +$(".val").html(); $(".val").html(v > 2 ? 0 : v + 1); });Manifestación
$(".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>Compruebe el valor de la etiqueta, si es mayor que 3, configúrelo en cero, algo así como
(".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); }