Real-time increment button input calculation

Asked

Viewed 198 times

1

I have a calculation of a input with a working variable. I have two buttons to increase and decrease the value of input, but when I use the buttons the calculation is not done in real time, it is only done when I click for the second time on it and still the calculation is done with the previous value that was in the input, and not updated as it should.

//botões - e + 
$( document ).on( 'click', '.box-right-delivery button', function () {
  var btn = $( this ),
  oldValue = btn.closest( '.box-right-delivery' ).find( 'input' ).val().trim(),
  newVal = 0;
  if ( btn.attr( 'data-dir' ) == 'up' ) {
    newVal = parseInt( oldValue ) + 1;
  } else {
    if ( oldValue > 1 ) {
      newVal = parseInt( oldValue ) - 1;
    } else {
      newVal = 0;
    }
  }
  btn.closest( '.box-right-delivery' ).find( 'input' ).val( newVal );
} );

//função calcular valor
function Calcular() {  
  var valor1 = 3.35;
  var campo1 = Number( document.getElementById( "campo1" ).value );
  var result = document.getElementById( "Resultado" );
  if ( result.textContent === undefined ) {
    result.textContent = ( campo1 * valor1 ).toFixed( 2 );
  } else { // IE
    result.innerText = ( campo1 * valor1 ).toFixed( 2 );
  }    
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="box-right-delivery">
  <input type="text" class="form-control input-sm center merge-bottom-input" name="campo1" id="campo1" onchange="Calcular(this.value)" value="0">
   <div class="box-button-right-delivery" role="group" aria-label="plus-minus">
     <button type="button" class="minus-button merge-top-left-button btn-circle" data-dir="dwn" id="dwn" onClick="Calcular(this.value)">
       <span class="glyphicon glyphicon-minus"></span>
     </button>		
     <button type="button" class="plus-button merge-top-right-button btn-circle" data-dir="up" id="up" onClick="Calcular(this.value)">
       <span class="glyphicon glyphicon-plus"></span>
     </button>
   </div>
</div>
<div id="Resultado"></div>

javascript jquery

  • When you click the first time, say "+", what is the expected value?

  • The first is 3.35, in the second *2 and so on. if I type straight into the input is working perfectly.

1 answer

3


The error is in calling the function calcular() right in the tag, when you should call at the end of the $( document ).on( 'click',.... This way you are doing, the initial value captured by the function in the onclick will be 0; and any number * 0 is equal to 0. The onclick on the buttons is unnecessary, because there is already a listener .on('click') on those buttons. By clicking on the buttons, the function passed on onclick is called before the value of the input be updated on .on('click').

Call the function calcular() at the end of on.('click') that the function will catch the updated value of the input, and remove the attribute from the buttons onclick:

$( document ).on( 'click', '.box-right-delivery button', function () {
  var btn = $( this ),
  oldValue = btn.closest( '.box-right-delivery' ).find( 'input' ).val().trim(),
  newVal = 0;
  if ( btn.attr( 'data-dir' ) == 'up' ) {
    newVal = parseInt( oldValue ) + 1;
  } else {
    if ( oldValue > 1 ) {
      newVal = parseInt( oldValue ) - 1;
    } else {
      newVal = 0;
    }
  }
  btn.closest( '.box-right-delivery' ).find( 'input' ).val( newVal );
  Calcular();
} );

//função calcular valor
function Calcular() {  
  var valor1 = 3.35;
  var campo1 = Number( document.getElementById( "campo1" ).value );
  var result = document.getElementById( "Resultado" );
  if ( result.textContent === undefined ) {
    result.textContent = ( campo1 * valor1 ).toFixed( 2 );
  } else { // IE
    result.innerText = ( campo1 * valor1 ).toFixed( 2 );
  }    
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="box-right-delivery">
  <input type="text" class="form-control input-sm center merge-bottom-input" name="campo1" id="campo1" onchange="Calcular(this.value)" value="0">
   <div class="box-button-right-delivery" role="group" aria-label="plus-minus">
     <button type="button" class="minus-button merge-top-left-button btn-circle" data-dir="dwn" id="dwn">
       <span class="glyphicon glyphicon-minus"></span>
     </button>		
     <button type="button" class="plus-button merge-top-right-button btn-circle" data-dir="up" id="up">
       <span class="glyphicon glyphicon-plus"></span>
     </button>
   </div>
</div>
<div id="Resultado"></div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.