Make multiple additions with multiple input value Javascript

Question

I am creating a lot of numbers inside of a div. Each time someone clicks a number I want to add it to another div. Let me make myself clear with some examples:

When a user clicks on the add class, the value of .addcop should be added to the value of .totalyHide. That means the value should change to 12.

When I click on the .add2 the value should be added on to 12, so the value of .totalyhide becomes 32.80.

and other terms, if I click the first + and click the second +, they should be added together on Yearly Price. I hope you understand what I am trying to do.

$('.add').click(function() {
  $('.addcop').click();
  var dp = $(".addcop").val();
  var total = $(".totalyHide").val();
  var bigTotal = parseFloat(total) + parseFloat(dp);
  $(".totaly").val("$" + bigTotal);
});
$('.add2').click(function() {
  $('.procurement').click();
  var procurement = $(".procurement").val();
  var total = $(".totalyHide").val();
  var bigTotal = parseFloat(total) + parseFloat(procurement);
  $(".totaly").val("$" + bigTotal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="box box6">
  <div class="titlet">work on it
    <hr>
  </div>
  <div class="explain">to help you better</div>
  <div class="money">
    <p class="me">$12 Yearly</p><i class="add fas fa-plus-square fa-2x"></i></div>
  <input type="text" name="content" class="addcop" style="display: none;" value="12">
</div>
<div class="box box5">
  <div class="titlet">Procurement
    <hr>
  </div>
  <div class="explain"></div>
  <div class="money">
    <p class="me">$20.80 Yearly</p><i class="add2 fas fa-plus-square fa-2x"></i></div>
  <input type="text" class="procurement" style="display: none;" value="20.80">
</div>
<div class="box box8">
  <div class="total">Your First Deposit will be: <input class="total1" type="button" value="$546"></div>
  <input type="text" class="totalHide" style="display: none;" value="546">
  <div class="total">Yearly Price: <input onchange="myFunction()" class="totaly" type="button" value="$0"></div>
  <input type="text" class="totalyHide" style="display: none;" value="0">
  <div class="total">On-off Price: <input class="total" type="button" value="$546"></div>
  <input type="text" class="total" style="display: none;" value="546">
</div>

zcoop98, yes. They are clickable. I want when I click the first + and click the second +, for 12 and 20.80 to be added together on Yearly Price. — Braham Cadet
– Braham Cadet, Commented Aug 5, 2020 at 15:14
I understand now :) At the moment, clicking the + replaces the value instead of adding it, which is what you're looking for. — zcoop98
– zcoop98, Commented Aug 5, 2020 at 15:15
You're adding the value of .totallyHide, which is 0. Maybe clicking on .addcop should update that value? — Barmar
– Barmar, Commented Aug 5, 2020 at 15:16
BTW, if you want inputs that the user doesn't see, use type="hidden" rather than style="display: none;" — Barmar
– Barmar, Commented Aug 5, 2020 at 15:16

Dharman · Accepted Answer · 2020-08-05 15:39:53Z

1

There is a minor issue with the JQuery code that you have written. You can add the following changes to get the desired result.

$('.add').click(function() {
  $('.addcop').click();
  var dp = $(".addcop").val();
  var total = $(".totalyHide").val();
  var bigTotal = parseFloat(total) + parseFloat(dp);
  $(".totalyHide").val(bigTotal); // Add this line here
  $(".totaly").val("$" + bigTotal);
});
$('.add2').click(function() {
  $('.procurement').click();
  var procurement = $(".procurement").val();
  var total = $(".totalyHide").val();
  var bigTotal = parseFloat(total) + parseFloat(procurement);
  $(".totalyHide").val(bigTotal); // Add this line here
  $(".totaly").val("$" + bigTotal);
});

The thing to note here is that whenever you are calculating the total, you'll have to set that total to $(".totalyHide"), so that you can read the updated value upon next click.

edited Aug 5, 2020 at 15:39

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Aug 5, 2020 at 15:34

Harshal Patil

864 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Braham Cadet Over a year ago

Harshal Patil, that's awesome, But it's going to add the value even if you click it twice.

Harshal Patil Over a year ago

In that case you can set the values of addcop and procurement class to 0 respectively at the end of each click event.

Collectives™ on Stack Overflow

Make multiple additions with multiple input value Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related