Input calculation with real-time increment button

Question

Input calculation with real-time increment button

Navigation

#1 by (3 votes)

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 the second time on it and the calculation with the previous value is still done there was 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><linkrel="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

asked by anonymous 08.12.2017 / 21:13

1 answer

Does the import order of components interfere with performance? Binary tree printing only the left side

score 3 · Accepted Answer

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

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

$( 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><linkrel="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>