CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rohit Verma
Rohit Verma

Reputation: 3785

Multiple calculation is not working properly

After type a number in input control, below will display multiplication it is working for when i'm using single row but when i work for multiple row this is not working.

How can i do it?

$(function() {
  $('.form-control').keyup(function() {
    $('.input-number').text($(this).val());
    $('.total').text($('.static-number').text() * $('.input-number').text());
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 101

Answers (7)

Keyur Patel
Keyur Patel

Reputation: 1

Here is simple solution just edit your javascript

`

<script type="text/javascript">
  $('.form-control').keyup(function() {
        var static = $(".static-number span").html();
        var number = $(this).val();
        var total = static * number;
        $(".input-number span").text(number);
        $(".total span").text(total);
  });
</script>

`

Upvotes: 0

Shashikant
Shashikant

Reputation: 103

This is not working because class names conflicting while accessing the values.

Try like this.

js:

$(function() {
  $('.form-control').keyup(function() {
  for(var i=0;i<$('.row_count').length;i++)
  {
   $('.input-number_row'+i).text($(this).val());
  $('.total_row'+i).text($('.static-number_row'+i).text() *$(this).val())
  }
  });
});

Html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row row_count" >
      <div class="col-3 static-number_row0"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number_row0"><span></span></div>
      <div class="col-3 total_row0"><span></span></div>
    </div>
    <div class="row row_count">
      <div class="col-3 static-number_row1"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number_row1"><span></span></div>
      <div class="col-3 total_row1"><span></span></div>
    </div>
  </div>
</div>

Upvotes: 0

Jins Thomas Shaji
Jins Thomas Shaji

Reputation: 877

You have to iterate through each element for calculating sum of the respective rows.

Try the below code:

$(function() {

  $('.form-control').keyup(function() {

    $('.input-number').text($(this).val());
    
    $('.row').each((i, obj) => {
      $(obj).children('.total').text($(obj).children('.static-number').text() * $(this).val());
    });

  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>3</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>

Upvotes: 1

Hitesh Tripathi
Hitesh Tripathi

Reputation: 854

Add class in row which you want to calculate value row_body and loop through this class.

$(function() {
  $('.form-control').keyup(function() {
  	let inputVal = $(this).val();
    $('.input-number').text(inputVal);    
   	$('.row_body').each(function(){
    		$(this).children('.total').text(parseFloat($(this).children('.static-number').text()) * parseFloat(inputVal));
     })
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row row_body">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row row_body">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>

Upvotes: 0

Rajesh
Rajesh

Reputation: 24915

Issue is that when you have multiple elements, your selector will return a list of elements and .text() will concat all their values.

So if you add 3 in textbox, you will get "33" for .input-number and "22" for .static-number. You will have to fetch only first element for this calculation.

Following is the sample:

$(function() {
  $('.form-control').keyup(function() {
    const value = $(this).val();
    $('.input-number').text(value);
    
    console.log(`Your equation is processed as: ${$('.static-number').text()} * ${ $('.input-number').text() }`, )
    $('.total').text($('.static-number:first').text() * value);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>

Upvotes: 1

Mayank Patel
Mayank Patel

Reputation: 1571

You need to loop through classes and perform the calculations.

$(function() {
  $('.form-control').keyup(function() {
    $('.input-number').text($(this).val());
    $('.static-number').each(function(){
     var currentElement = $(this);
     var static_num = currentElement.parent().find('div.static-number').text();
     var input_num = currentElement.parent().find('div.input-number').text();
     currentElement.parent().find('div.total').text(static_num*input_num)
    })
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>

Upvotes: 1

Keynan
Keynan

Reputation: 1346

$(...)

returns a list of elements matching. The functions, e.g. text know how to behave when that list contains a single element but not when it contains multiple elements. you need to act on them individually.

You'll want to do something like:

$('row').each(elem => {
  const sn = $(elem).find('.static-number').text()
  const input = $(elem).find('.input-number').text()
  $(elem).find('.total').text(sn * input)
});

Upvotes: 0

Related Questions