Question 49230 in Javascript Question posted in
A very good W3school tutorial can be found here.

Return Currency format – Javascript

I have a table that does a multiplication of qty by price returning a line item total then a total for all the line items.

I need the results to be in two decimal places. (bonus points if there is a way to return with the dollar sign but from what I can find that isn’t an option.)

Scripts I am using below.
I am attempting to use the .toFixed(2) But can’t seem to find where to put it correctly without cracking my current scripts. (Self taught so please dumb it down for me 🙂 )

<script>
function total_amount(){
        var table = document.getElementById('line_item');
        for(var i=1;i<table.rows.length;i++){
            qty = table.rows[i].cells[1].getElementsByTagName("input")[0].value
            unit = table.rows[i].cells[2].getElementsByTagName("input")[0].value
            table.rows[i].cells[3].getElementsByTagName("input")[0].value = qty * unit;
        }
    }
</script>
Tags:

2

Answers


  1. 0

    You can use the toFixed() method to format the result of the multiplication operation to two decimal places. Here’s an updated version of your script that includes this change:

    <script>
function total_amount(){
    var table = document.getElementById('line_item');
    for(var i=1;i<table.rows.length;i++){
        qty = table.rows[i].cells[1].getElementsByTagName("input")[0].value
        unit = table.rows[i].cells[2].getElementsByTagName("input")[0].value
        var total = (qty * unit).toFixed(2); // format the result to 2 decimal places
        table.rows[i].cells[3].getElementsByTagName("input")[0].value = total;
    }
}
</script>

    This should update the value in the fourth column of each row with the result of the multiplication, rounded to two decimal places. If you also want to add a dollar sign to the results, you can concatenate it to the total value like this:

    var total = "$" + (qty * unit).toFixed(2);

    This will add the dollar sign at the beginning of the string representing the total value.

    Login or Signup to reply.
  2. 0

    You can use the internationalization (i18n) currency formatter:

    const cf = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

function total_amount() {
  const table = document.getElementById('line_item');
  let i, qty, unit;
  for (i = 1; i < table.rows.length; i++) {
    qty = table.rows[i].cells[1].querySelector('input').valueAsNumber;
    unit = table.rows[i].cells[2].querySelector('input').valueAsNumber;
    table.rows[i].cells[3].querySelector('input').value = cf.format(qty * unit);
  }
}

total_amount();
    <table id="line_item">
  <tr>
    <th>Name</th>
    <th>Quantity</th>
    <th>Unit Price</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>Soap</td>
    <td><input type="number" value="1" /></td>
    <td><input type="number" value="4.99" step="0.01" /></td>
    <td><input type="text" disabled /></td>
  </tr>
  <tr>
    <td>Chips</td>
    <td><input type="number" value="2" /></td>
    <td><input type="number" value="2.99" step="0.01" /></td>
    <td><input type="text" disabled /></td>
  </tr>
</table>

    Also, you should separate your table head and body. This way you don’t need to arbitrarily skip the first row.

    const cf = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

function total_amount() {
  const table = document.getElementById('line_item');
  let i, qty, unit;
  [...table.tBodies[0].rows].forEach(row => {
    qty = row.cells[1].querySelector('input').valueAsNumber;
    unit = row.cells[2].querySelector('input').valueAsNumber;
    row.cells[3].querySelector('input').value = cf.format(qty * unit);
  });
}

total_amount();
    <table id="line_item">
  <thead>
    <tr>
      <th>Name</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Soap</td>
      <td><input type="number" value="1" /></td>
      <td><input type="number" value="4.99" step="0.01" /></td>
      <td><input type="text" disabled /></td>
    </tr>
    <tr>
      <td>Chips</td>
      <td><input type="number" value="2" /></td>
      <td><input type="number" value="2.99" step="0.01" /></td>
      <td><input type="text" disabled /></td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search