Javascript isn't correctly adding and subtracting floats

Question

I've been messing about with an inventory-like system for a website I'm working on.
I don't usually use JavaScript, So this little problem has been driving me crazy.

I'm trying to add two floats together using two different functions.
One is addition, One is subtraction.

This is the code:

function addItem(item){
  $("#item-" + item.toString()).insertAfter("#selected h1");
  $("#item-" + item.toString() + " a").attr("onclick","remItem(" + item.toString() + ")");
  updateTotal(item, 0);
}

function remItem(item){
  $("#item-" + item.toString()).insertAfter("#my h1");
  $("#item-" + item.toString() + " a").attr("onclick","addItem(" + item.toString() + ")");
  updateTotal(item, 1);
}

function updateTotal(item, action){
  if(action=0){
    var value = $("#item-" + item.toString() + " a .value").text().replace("$ ", "");
    var oldVal = $(".total").text().replace("$ ", "");
    var newVal = parseFloat(value) + parseFloat(oldVal);
    $(".total").text(newVal);
  } else {
    var value = $("#item-" + item.toString() + " a .value").text().replace("$ ", "");
    var oldVal = $(".total").text().replace("$ ", "");
    var newVal = parseFloat(value) - parseFloat(oldVal);
    $(".total").text(newVal);
  }
}

.wrapper{
  text-align: center;
}

.item-holder{
  width: 45%;
  text-align: left;
  padding: 5px;
  overflow: auto;
  display: inline-block;
  background-color: #222;
  min-height: 160px;
}
.item-holder h1{
  color: white;
  margin: 0;
  padding: 0;
  text-align: center;
}

.smallimg{
  margin: 2px 2%;
  width: 96%;
}
.item {
  margin: 2px 2px 2px 2px !important;
  cursor: pointer;
  color: #333;
  background: rgba(200,200,200,0.9);
  text-align: center;
  min-width: 60px;
  max-width: 100px;
  width: 18%;
  border: solid medium gray;
  display: inline-block;
}
.value{
  font-size: 10pt;
  font-weight: bold;
  padding-top: 5px;
}
.rarity{
  font-style: italic;
  font-weight: bold;
}
.total{
  font-weight: bold;
}




.Consumer{
  border-color: rgb(176, 195, 217);
}
.Mil-Spec{
  border-color: rgb(75, 105, 255);
}
.Industrial{
  border-color: rgb(94, 152, 217);
}
.Restricted{
  border-color: rgb(136, 71, 255);
}
.Classified{
  border-color: rgb(211, 44, 230);
}
.Covert{
  border-color: rgb(235, 75, 75);
}


#selected{
  color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="total">$ 0.00</span><br /><br />
  
<!-- START ITEM HOLDER-->
<div id="my" class="item-holder">
  <h1>Your Items</h1>
  
  <div class="item Industrial" id="item-22">
    <a onClick="addItem(22);">
      <div class="value">$ 0.05</div>
    
      <img class="smallimg" src="http://cdn.steamcommunity.com/economy/image/7xs5DOPUQVgttOnINvLH41dX872npE8Y-Xo60tIUj0QmEA73usgHSo1t9TYQkpttT1Co-q67Txz_cT3A0wKYTilSGv2rzABDnRzxPBPYiHxLRuPi6u4BBfNwDMCbUs4XGA4Ox7nMBUq2J_ktDuKNfElG9JLx4gcd6DBlgc5SmRYmGE6o_s4QSYgi9G4Z2Jl8CEbm-Ky8VUKqJ2qCzFLOQyUZUOijyg==/99fx66f" title="SG 553 | Waves Perforated (Field-Tested)">
  
      <div class="rarity">Field-Tested</div>  
    </a>
  </div>

    <div class="item Restricted" id="item-21">
    <a onClick="addItem(21);">
      <div class="value">$ 11.40</div>
    
      <img class="smallimg" src="http://cdn.steamcommunity.com/economy/image/7xs5DOPUQVgttOnINvLH41dX872npE8Y-Xo60tIUj0QmEA73usgHSo1t9TYQkpttT1Co-q67Txz_cT3A0wKYTilSGv2rzABDnRzxPBPYiHxLRuPi6u4BBfNwDMCbUs4XGA4Ox7nMBUq2J_ktDuKNfElG9JLx4gcd6DBlgc5SmRYmGE6o_s4QSYgi9G4Z2Jl8CEbm-Ky8VUKqJ2qCzFLOQyUZUOijyg==/99fx66f" title="SG 553 | Waves Perforated (Field-Tested)">
  
      <div class="rarity">Field-Tested</div>  
    </a>
  </div>
  
    <div class="item Covert" id="item-20">
    <a onClick="addItem(20);">
      <div class="value">$ 7.65</div>
    
      <img class="smallimg" src="http://cdn.steamcommunity.com/economy/image/7xs5DOPUQVgttOnINvLH41dX872npE8Y-Xo60tIUj0QmEA73usgHSo1t9TYQkpttT1Co-q67Txz_cT3A0wKYTilSGv2rzABDnRzxPBPYiHxLRuPi6u4BBfNwDMCbUs4XGA4Ox7nMBUq2J_ktDuKNfElG9JLx4gcd6DBlgc5SmRYmGE6o_s4QSYgi9G4Z2Jl8CEbm-Ky8VUKqJ2qCzFLOQyUZUOijyg==/99fx66f" title="SG 553 | Waves Perforated (Field-Tested)">
  
      <div class="rarity">Field-Tested</div>  
    </a>
  </div>
       
       
</div>
  <!-- END ITEM HOLDER -->

<div id="selected" class="item-holder">
  <h1>Selected Items</h1>
  
</div>
  
</div>

The first item works fine, You add the item, It updates the total.
Add a second item, It subtracts the new item value from the old one.
Remove the first item and it adds the value to the total.
It's a little messed up, it randomly adds and subtracts.

I'm really not sure why it's causing this, so I came here.
Any ideas what I'm doing what?

Thanks in advance!

CodePen

score 2 · Answer 1 · answered Nov 01 '14 at 01:52

Inu, in addition to fixing the if(action = 0) bug, you might also like to consider the following :

attach click handlers in javascript, not as HTML attributes.
things will simplify with more carefully chosen jQuery selectors and method chaining.
by delegating click handling to static wrappers (#selected and #my), you can avoid the need to dynamically swap out 'addItem' and 'remItem'. The click action of each item will be automatically determined by the current wrapper.
in the click handlers, this refers to the clicked a element, therefore no need to rediscover it with a jQuery selector, and .closest() will avoid the need to find items by id.
to maintain a reliable total, you should really recalculate from scratch by looping through all items, rather than applying deltas.
by putting values in spans with the '$' outisde, you can get the values directly, without stripping out the symbol.

Put everything together and you should end up with something like this :

HTML

....
<div class="value">$ <span>11.40</span></div>
....

Javascript

$('#my').on('click', '.item a', function(e) {
    e.preventDefault();
    $(this).closest('.item').insertAfter("#selected h1");
    calcTotal();
});

$('#selected').on('click', '.item a', function(e) {
    e.preventDefault();
    $(this).closest('.item').insertAfter("#my h1");
    calcTotal();
});

function calcTotal(item, sign) {
    var total = 0;
    $("#selected .value span").each(function() {
        total += Number($(this).text());
    });
    $(".total").text(total);
}

untested

Thanks @Roamer-1888, This has helped me a lot! I also used `.toFixed(2)` when setting the total, This stops numbers like `$0.10` showing as `$0.1`, or the calculation _bugs?_ returning `$0.10000000000007` — User K, Nov 01 '14 at 21:50
Yes, `.toFixed(2)`, is your best friend in this kind of application. — Roamer-1888, Nov 02 '14 at 00:54

score 1 · Accepted Answer · answered Nov 01 '14 at 00:06

1

You are using the assignment operator = here: if(action=0){ when you should be using the comparisson operator == as if(action==0){

answered Nov 01 '14 at 00:06

scrappedcola

10,423
1
32
43

Javascript isn't correctly adding and subtracting floats

2 Answers2