0

I have a calculation where I need to multiply the values of two different inputs, add the value of a third, and put that value into the other input. The first input will sometimes have a decimal point number (EX: 3.2) while the second number has commas for thousands, millions, etc... I then need to properly multiply those two numbers into each other, add the third input value, and put the result into the fourth input correctly.

Right now the behavior is a bit strange, sometimes the decimal number 3.2, for example, will be used as 32. I have tried a few different solutions to similar problems, but they did not produce the results I need or also had odd behavior. The toFixed() method sometimes creates numbers that are far too large. It may turn millions into quadrillions, for example.

EDIT: Sorry, I forgot to mention I have a third input value that needs to be added to the other two after multiplication. THIS is where the issue appears.

$(document).on("input", "#input-1, #input-2, #input-3", function() {
  var val1 = $("#input-1").val();
  var val2 = parseFloat($("#input-2").val().replace(/,/g, ''));
  var val3 = $("#input-3").val();
  var total = (val1 * val2) + val3;
  total = total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  $("#input-4").val(total).trigger("input");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input id="input-1" type="text" value="3.2" />
  <input id="input-2" type="text" value="1,000,000" />
  <input id="input-3" type="text" value="3" />
  <input id="input-4" type="text" value="0" />
</div>
Lord Taylor
  • 39
  • 6
  • Can you share some examples on how to reproduce the issue in your main post? – palaѕн May 05 '20 at 13:06
  • Your code seems fine at a first glance. Do you have any example of a problematic case? – Aioros May 05 '20 at 13:06
  • 2
    What exactly is the odd behavior? Seems to work fine. Are you facing this issue: [Is floating point math broken?](https://stackoverflow.com/questions/588004) – adiga May 05 '20 at 13:06
  • I made an edit and this should explain things more clearly. Thank you! – Lord Taylor May 05 '20 at 13:13
  • The only issue that I can see is when the second number is decimal: the result has a lot of decimal digits (because of floating point math) and the regex to put the commas doesn't like that at all. The math is fine. – Aioros May 05 '20 at 13:16
  • 1
    `val1`, `val2`, `val3` are input values and they are all strings. When you use `*` operator, they are implicitly converted to numbers. But when you use `+` operator, it uses string concatenation. You need to convert `val3` to number before adding. Like this: `(val1 * val2) + parseFloat(val3)` – adiga May 05 '20 at 13:19
  • I am still not sure, what is the issue that you are having exactly... – palaѕн May 05 '20 at 13:24
  • "_The toFixed() method sometimes creates **numbers**_" this is wrong. The `toFixed()` method returns a **string** representing the given number using fixed-point notation. – palaѕн May 05 '20 at 13:26

1 Answers1

1

Try to cast input1's value to Number

var val1 = Number($("#input-1").val());

Also, you don't need parseFloat for the second input's value, if there would be no decimals. Anyway, you can wrap the result with Number() too.

Alex Khristo
  • 477
  • 2
  • 8