如何添加带小数位的数字

Question

I am trying to create a form that adds up numbers to two decmial points. Ie be able to add up 5.5 with 105.67 with 12.54 and get: 123.71

Here is as far as I've got, but when I try adding .toFixed(2) it either just does the inputs and not the total...

I'm very new to Javascript so just finding way at mo

Here is my jsfiddle: https://jsfiddle.net/Vicky1984/Lpwcuyb5/d

Here is code I'm using;

function findTotal() {
  var arr = document.getElementsByName('qty');
  var tot = 0;

  for (var i = 0; i < arr.length; i++) {
    if (parseInt(arr[i].value))
      tot += parseInt(arr[i].value);
   }
  document.getElementById('total').value = tot;
 }

thanks in advance

Answer 1

parseFloat() will return floating point numbers. ex. 1, 0, -2, 3.3, 505.1236

parseInt() will return whole number integers ex. -1, 0, 1, 2, -59635

Use parseFloat()

BTW, each id must be unique, so the second input is now qty2

FIDDLE

SNIPPET

 function findTotal() { var arr = document.getElementsByName('qty'); var tot = 0; for (var i = 0; i < arr.length; i++) { if (parseFloat(arr[i].value)) tot += parseFloat(arr[i].value); } document.getElementById('total').value = tot; } 

 <div class="table"> <div class="row header"> <div class="cell"> Take Home Pay </div> <div class="cell"> Amount Per Month </div> </div> <div class="row"> <div class="cell"> Salary </div> <div class="cell"> <input placeholder="0.00" onblur="findTotal()" type="text" name="qty" id="qty1" /> </div> </div> <div class="row"> <div class="cell"> Overtime </div> <div class="cell"> <input placeholder="0.00" onblur="findTotal()" type="text" name="qty" id="qty2" /> </div> </div> <div class="row total-row"> <div class="cell"> Total Take Home Pay </div> <div class="cell" data-label="Monthly Income"> <input placeholder="0.00" type="text" name="total" id="total" /> </div> </div> </div>