0

tengo dos botones los cuales quiero realizar un contador de incremento y el otro de disminución y que muestre el resultado en un único campo de texto.

  <Button ID="buttonLogin" style="widht:60px; height:50px;" Class="ButtonAction"
      onMouseOver="this.className='ButtonActionOver';"
      onmouseout="this.className='ButtonAction';" runat="server">Login
  </Button><br></br>
  <Button ID="buttonLogout" style="widht:60px; height:50px;" Class="ButtonAction"
      onMouseOver="this.className='ButtonActionOver';"
      onmouseout="this.className='ButtonAction';" runat="server">Logout
   </Button>


   <asp:TextBox ID="txtNpersonas" style="font-size:25px; width:150px;"   runat="server"/> 

    $("[id$=buttonLogin]").click( function(){ 

       alert("llega");

       int valor = 1++;
       $("[id$=txtNpersonas]").attr(valor);


     });

Por ejemplo esto es otra acción en mi sistema, el caso es que mi sistema trabaja con diferentes lenguajes de programación, coloco un ejemplo

protected void Button_Arranque(object sender, EventArgs e){

this.Response.Redirect(string.Format("../../webtrak/report/view.aspx?ReportKey=CNTR_TIEMPO&ShowMenu=0&Prueba=2&sDatos=" + sDatos));
}

En este caso solo actualizo mi pagina claro esto es en c#. En el caso del contador necesito tomar en cuentas el valor del campo de texto que se encuentra actualmente y empezar a aumentar o disminuir dependiendo del numero, todo esto seria js. En la caso de tener una variable = 0 siempre me va a contar desde 0 sin tener en cuenta lo que haya en el campo de texto.

var valor = $("[id$=txtNpersonas]").val();

Asigne esto pero no me sirve, esta mal formado. ¿Como puedo realizarlo?

2 respuestas 2

2

Primero declara una variable global:

var valor = 0;

y en cada click a cada botón, incrementa el valor según qué botón apriete:

$("[id$=buttonLogin]").click( function(){ 
  valor += 1; // o valor -=1 si apreta el botón "Logout"
  $("[id$=txtNpersonas]").val(valor);
});

finalmente asignar el .val() del textarea con la variable valor

$("[id$=txtNpersonas]").val(valor);

En caso de que quieras asignar un valor predeterminado, deberás preguntar si hay valor en el textarea, y si lo hay, multiplicalo por 1 para que .val() -que es string- se convierta en numeric y haga bien el conteo.

var valor = ($("[id$=txtNpersonas]").val()!='')?$("[id$=txtNpersonas]").val()*1:0;

var valor = ($("[id$=txtNpersonas]").val()!='')?$("[id$=txtNpersonas]").val()*1:0;
$("[id$=buttonLogin]").click( function(){ 
  //alert("llega");
  valor += 1;
  $("[id$=txtNpersonas]").val(valor);
});
$("[id$=buttonLogout]").click( function(){ 
  //alert("llega");
  valor -= 1;
  $("[id$=txtNpersonas]").val(valor);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Button ID="buttonLogin" style="widht:60px; height:50px;" Class="ButtonAction"
      onMouseOver="this.className='ButtonActionOver';"
      onmouseout="this.className='ButtonAction';" runat="server">Login
  </Button><br></br>
  <Button ID="buttonLogout" style="widht:60px; height:50px;" Class="ButtonAction"
      onMouseOver="this.className='ButtonActionOver';"
      onmouseout="this.className='ButtonAction';" runat="server">Logout
   </Button>


<textarea ID="txtNpersonas" style="font-size:25px; width:150px;"   runat="server">4</textarea>

8
  • Si perfecto gracias.
    – Geovanny
    Commented el 22 abr. 2020 a las 6:24
  • Hola, una pregunta en la variable var valor=0; para pasarle el valor del campo de texto actual como sería he probado con: var valor = $("[id$=txtNpersonas]").val(); en vez de aumentarme, me coloca 1111..
    – Geovanny
    Commented el 22 abr. 2020 a las 7:53
  • Para qué quieres asignar var valor = $("[id$=txtNpersonas]").val() si el conteo lo hace por fuera?
    – Roy Bogado
    Commented el 22 abr. 2020 a las 8:07
  • en mi sistema cuando realizo otra acción pierde ese valor, empieza de nuevo a contar desde cero. Por ejemplo: tengo en mi caja de texto un 4 realizo otra accion o actualizo el valor se mantiene pero en el contador empieza de nuevo a contar desde 0. Adjunto foto para más información
    – Geovanny
    Commented el 22 abr. 2020 a las 9:08
  • 1
    Y yo mi respuesta, espero te sirva.
    – Roy Bogado
    Commented el 22 abr. 2020 a las 10:00
0

Según entiendo lo que quieres es que un botón incremente y otro haga una disminución en un solo input. Esto puede servirte:

function Action(increment){
    const input = document.getElementById("myInput")

    if (increment) 
        input.value = parseFloat(input.value) + 1
    else
        input.value = parseFloat(input.value) - 1
}
 <input id="myInput" type="number" value="0">
 <button id="btnIncrement" onclick="Action(true)">Incrementar</button>
 <button id="btnDecrement" onclick="Action(false)">Disminuir</button>
    

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.