CODEWITHSUNDEEP
javascriptjquery
Bruno
Bruno

Reputation: 1055

Use two classes in the same function

I have two functions like this:

1:

$(".soma").blur(function(){

    var total = 0;

    $(".soma").each(function(){
        total = total + Number($(this).val().replace(/\s/g, ''));  
    });
    
    $("#sub").val(total);
});

2:

$(".soma1").blur(function(){

    var total1 = 0;

    $(".soma1").each(function(){
        total1 = total1 + Number($(this).val().replace(/\s/g, ''));  
    });

    $("#sub1").val(total1);
});

I need to get the difference between the two and put the value in the input in real time.

My code that doesn't work:

$(".soma").blur(function(){

    var total4 = 0;

    $(".soma").each(function(){
        total4 = total4 + Number($(this).val().replace(/\s/g, ''));  
    });
$(".soma1").blur(function(){
    $(".soma1").each(function(){
        total5 = total5 + Number($(this).val().replace(/\s/g, ''));  
    });
    
    total6 = total4 - total5;

    $("#sub1").val(total6.toFixed(2));
});
});

HTML:

<div class="form-group col-xs-1">                       
  <input type="text" class="form-control1 Preco soma" name="Valor[]" value="0.00" required>
  <span class="form-highlight">$</span>                     
  <span class="form-bar"></span>                        
  <label class="label1" for="Valor">Total</label>        
</div>
<div class="form-group col-xs-2">                       
  <input type="text" class="form-control1 Preco soma1" name="Compra[]" value="0.00" required>
  <span class="form-highlight">$</span>                     
  <span class="form-bar"></span>                        
  <label class="label1" for="Compra">Valor de Compra</label>        
</div>

<div class="form-group col-xs-4" style="float:right; margin-right: 2%; line-height: 2;">                        
  <input type="text" class="form-control1" name="sub" id="sub3" readOnly="true" value="">
  <span class="form-highlight">$</span>                     
  <span class="form-bar"></span>                        
  <label class="label1" for="sub3">Diferença em Valor</label>        
</div>

I don't just click on a function because they are two different sums.

Upvotes: 0

Views: 58

Answers (1)

epascarello
epascarello

Reputation: 207501

Just do both calculations in one change.

$(".soma1, .soma").blur(function(){

    var total1 = 0;
    var total = 0;

    $(".soma1").each(function(){
        total1 = total1 + Number($(this).val().replace(/\s/g, ''));  
    });
    $(".soma").each(function(){
        total = total + Number($(this).val().replace(/\s/g, ''));  
    });

    console.log(total - total1);

});

Upvotes: 3

Related Questions