Limit the multiplied amount result to 2 decimals

Question

I made a simple javascript that multiplies an amount and shows the result. However, I want to limit the result to 2 decimals. I've tried using toFixed, but that doesn't seem to work.

Does anyone know how to make this work?

function MultiplyTheAmount() {
 var multiplier = 0.75;
 var roundedMultiplier = multiplier.toFixed(2);
 document.getElementById('multiplyResult').innerHTML = document.getElementById('multiplyAmount').innerHTML * roundedMultiplier;
};
MultiplyTheAmount();

<ul style="list-style:none;">
  <li>Amount:</li>
  <li id="multiplyAmount">119.99</li>
  <li><br/></li>
  <li>Multiply by:</li>
  <li>0.75</li>
  <li><br/></li>
  <li>Result:</li>
  <li id="multiplyResult"></li>
</ul>

score 2 · Answer 1 · answered May 23 '16 at 20:04

2

You need to limit the final result to have 2 decimal places:

(document.getElementById('multiplyAmount').innerHTML * roundedMultiplier).toFixed(2);

answered May 23 '16 at 20:04

madox2

49,493
17
99
99

I had toFixed in the wrong place, this is much better, thanks! :) – Macchiato May 23 '16 at 20:27

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

Apply the toFixed method to the end result to eliminate the magnified floating point inaccuracy you are seeing:

function MultiplyTheAmount() {
    var multiplier = 0.75;
    var roundedMultiplier = multiplier.toFixed(2);
    document.getElementById('multiplyResult').textContent = ( 
        +document.getElementById('multiplyAmount').textContent * roundedMultiplier
    ).toFixed(2);
};
MultiplyTheAmount();

<ul style="list-style:none;">
  <li>Amount:</li>
  <li id="multiplyAmount">119.99</li>
  <li><br/></li>
  <li>Multiply by:</li>
  <li>0.75</li>
  <li><br/></li>
  <li>Result:</li>
  <li id="multiplyResult"></li>
</ul>

Not related to the question, but I would suggesting the use of textContent instead of innerHTML when not dealing with HTML content.

edited May 23 '17 at 11:52

Community

1
1

answered May 23 '16 at 20:07

trincot

317,000
35
244
286

And it should also be suggested to store `document.getElementById('multiplyResult')` in a variable to avoid accessing it twice. – Andreas Louv May 23 '16 at 20:09
1

@andlrc, that element is accessed only once. The other reference is to `multiplyAmount`, not `multiplyResult`. – trincot May 23 '16 at 20:18
Thanks for the extensive answer @trincot, your solution works :) I'm also using textContent now instead of innerHTML. – Macchiato May 23 '16 at 20:24
1

@trincot Thanks for clarifying :-) – Andreas Louv May 23 '16 at 20:25

Limit the multiplied amount result to 2 decimals

2 Answers2