How do I display result to 2 decimal places?

Question

I'm trying to round the final result of my conversion to 2 decimal places, but I'm unsure where I need to add the .toFixed(2)

tried adding .toFixed(2); to various places but no luck. Everywhere that explains how to use it sets their own variable with a number value, but my result varies depending on the amount inputted/currency rate.

 <div class="container">
   <form class="form">
        <input type="number" onkeypress="return noenter()" class="" id="amount"/>
     </div>
     <div style="display:none;">
        <p id="currency-1">M</p>
      </div>
      <div class="">
        <select class="form-control" id="currency-2" required>
          <option>USD</option>
          <option>GBP</option>
          <option>EUR</option>
          <option>CAD</option>
        </select>
      </div>
    </form>
    <div class="result">
      <p>
        <span class="given-amount"></span> 
        <span class="base-currency"></span>
        <span class="final-result"></span> 
        <span class="second-currency"></span>
      </p>
    </div>

var crrncy = {
  'M': {
    'USD': 0.80,
    'GBP': 0.65,
    'EUR': 0.77,
    'CAD': 0.95,
    'M': 1
  },
}
var baseCurrencyInput = document.getElementById('currency-1');
var secondCurrencyInput = document.getElementById('currency-2');
var amountInput = document.getElementById('amount');
var toShowAmount = document.querySelector('.given-amount');
var toShowBase = document.querySelector('.base-currency');
var toShowSecond = document.querySelector('.second-currency');
var toShowResult = document.querySelector('.final-result');
function convertCurrency(event) {
  event.preventDefault();
  var amount = amountInput.value;
  var from = baseCurrencyInput.innerText;
  var to = secondCurrencyInput.value;
  var result = 0;

  try {
    if (from == to) {
      result = amount;
    } else {
      result = amount * crrncy[from][to];
    }
  } catch (err) {
    result = amount * (1 / crrncy[to][from]);
  }

  toShowAmount.innerHTML = amount;
  toShowBase.textContent = from + ' would only cost you ';
  toShowSecond.textContent = to;
  toShowResult.textContent = result;
}

amountInput.addEventListener('keyup', convertCurrency);

secondCurrencyInput.addEventListener('click', convertCurrency);

function noenter() {
  return !(window.event && window.event.keyCode == 13); 

};

I expect the converter to display to 2 decimal places (and rounding up if possible). E.g. 23 M = 18.40 USD

Try not to hardcode this, since there are currencies that use no, or more than 2 decimal places. — KIKO Software, Jun 07 '19 at 08:17
Possible duplicate of [Formatting a number with exactly two decimals in JavaScript](https://stackoverflow.com/questions/1726630/formatting-a-number-with-exactly-two-decimals-in-javascript) — Dakota Jang, Jun 07 '19 at 08:21
on every result aside from the one I needed apparently Cristian @KIKO Software hardcoding it won't be an issue as the site will only be dealing in 5 main currencies — Zee, Jun 07 '19 at 08:24

score 4 · Accepted Answer · answered Jun 07 '19 at 08:14

...tried adding .toFixed(2); to various places but no luck.

You put it where you're outputting the value:

toShowResult.textContent = result.toFixed(2);
// ------------------------------^^^^^^^^^^^

Side note: Your code is relying on implicit conversion from string to number, and not doing that conversion in every place, so sometimes at the end result contains a string and other times it contains a number. Remember that the value on input elements is always a string.

Convert to number explicitly, and early:

var amount = +amountInput.value;
// ----------^
var to = +secondCurrencyInput.value;
// ------^

See this answer for your various string-to-number options, using a unary + as above is just one option.

Also remember that the standard IEEE-754 number type JavaScript uses is imprecise and not really well-suited to financial applications. You might consider JavaScript's new BigInt (converting to number and dividing by 100 for output), or until that's more broadly-supported, one of the many "big integer" or "big number" libraries.

How do I display result to 2 decimal places?

1 Answers1