Ways to calculate the total order amount when the quantity is modified

Question

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity:

 <table id="order-products" class="mobileorder-table">
        <colgroup>
            <col style="width: 80%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
        </colgroup>

        <tbody>
                <tr>
                    <td>
                       Product1
                    </td>
                    <td>
 <span class="mobileorder-price">0,98</span>
                    </td>
                    <td>
                        <input data-product="4750211645618" class="quantity" id="product_Soodkogus" name="product.Soodkogus"
                       type="number" min="0" max="999999" value=""
                       onblur="orderSumRefresh()" />
                    </td>
                </tr>
        </tbody>
    </table>
    Order total <p id="js-doksumma"></p>

If the quantity is changed, the order total value should be updated. I attempted

<script>
    function parseFloatFormatted(txt) {
    if (typeof txt !== 'string' || txt === null || txt === "") {
      return 0
      }
    return parseFloat(txt.replace(',', '.').replace(' ', ''))
    }

function orderSumRefresh() {
    let totalAmount = 0
    const table = document.getElementById("order-products")
    table.rows.forEach((row) => {
       const hind = row.cells[1].querySelector(".mobileorder-price").innerText
       const kogus = row.cells[2].querySelector(".quantity").value
       const rowSum = Math.round(parseFloatFormatted(hind)* parseFloatFormatted(kogus) * 100) / 100
       totalAmount += rowSum
       });
    var dok = document.getElementById("js-doksumma")
    dok.innerText = totalAmount.toFixed(2)
    }

</script>

but encountered an error

What is the correct way to implement this? Should pure CSS, JavaScript, or jQuery be used?

A modern Chrome browser is being used on a mobile phone with an ASP.NET 6 MVC Razor application.

javascript html css javascript-objects onblur

Answer 1

Answer №1

Nick Vu pointed out a problem in the for loop, so I made this adjustment:

for (let i = 0; i < table.rows.length; i++) {

Upon further investigation, I discovered more issues in the code. For instance, the index of the childNodes was incorrect. By using

console.log(row.cells[1].childNodes)

You can observe that there are 3 children and you are attempting to access the middle one (index: 1).

To retrieve data from the input element, make sure to utilize the .value property like so:

const quantity = row.cells[2].childNodes[1].value

********************* EDIT *******************

Modifying the code based on the updated solution.

To extract data from the html element, utilize the .innerHTML property.

function parseFloatFormatted(txt) {
    if (typeof txt !== 'string' || txt === null || txt === "") {
        return 0
    }
    return parseFloat(txt.replace(',', '.').replace(' ', ''))
}

function orderSumRefresh() {
    let totalAmount = 0
    const table = document.getElementById("order-products")
    /*
    for (let i = 0; i < table.rows.length; i++) {
        const row = table.rows[i]
        const price = row.cells[1].childNodes[1].innerHTML
        const quantity = row.cells[2].childNodes[1].value
        const rowSum = Math.round(parseFloatFormatted(price) * parseFloatFormatted(quantity) * 100) / 100
        totalAmount += rowSum
    }
    */
    for (const row of table.rows) {
        const price = row.cells[1].querySelector(".mobileorder-price").innerHTML
        const quantity = row.cells[2].querySelector(".quantity").value
        const rowSum = Math.round(parseFloatFormatted(price) * parseFloatFormatted(quantity) * 100) / 100
        totalAmount += rowSum
    }
    const totalPrice = document.getElementById("js-doksumma")
    totalPrice.innerText = totalAmount.toFixed(2)
}

<table id="order-products" class="mobileorder-table">
    <colgroup>
        <col style="width: 80%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
    </colgroup>

    <tbody>
        <tr>
            <td>
                Product1
            </td>
            <td>
                <span class="mobileorder-price">0.98</span>
            </td>
            <td>
                <input data-product="4750211645618" class="quantity" id="product_Soodkogus" name="product.Soodkogus"
                    type="number" min="0" max="999999" value="" onblur="orderSumRefresh()" />
            </td>
        </tr>
    </tbody>
</table>
Order total <p id="js-doksumma"></p>

I recommend utilizing console.log() to debug and evaluate variables for any potential coding errors.

Answer 2

Nick Vu pointed out a problem in the for loop, so I made this adjustment:

for (let i = 0; i < table.rows.length; i++) {

Upon further investigation, I discovered more issues in the code. For instance, the index of the childNodes was incorrect. By using

console.log(row.cells[1].childNodes)

You can observe that there are 3 children and you are attempting to access the middle one (index: 1).

To retrieve data from the input element, make sure to utilize the .value property like so:

const quantity = row.cells[2].childNodes[1].value

********************* EDIT *******************

Modifying the code based on the updated solution.

To extract data from the html element, utilize the .innerHTML property.

function parseFloatFormatted(txt) {
    if (typeof txt !== 'string' || txt === null || txt === "") {
        return 0
    }
    return parseFloat(txt.replace(',', '.').replace(' ', ''))
}

function orderSumRefresh() {
    let totalAmount = 0
    const table = document.getElementById("order-products")
    /*
    for (let i = 0; i < table.rows.length; i++) {
        const row = table.rows[i]
        const price = row.cells[1].childNodes[1].innerHTML
        const quantity = row.cells[2].childNodes[1].value
        const rowSum = Math.round(parseFloatFormatted(price) * parseFloatFormatted(quantity) * 100) / 100
        totalAmount += rowSum
    }
    */
    for (const row of table.rows) {
        const price = row.cells[1].querySelector(".mobileorder-price").innerHTML
        const quantity = row.cells[2].querySelector(".quantity").value
        const rowSum = Math.round(parseFloatFormatted(price) * parseFloatFormatted(quantity) * 100) / 100
        totalAmount += rowSum
    }
    const totalPrice = document.getElementById("js-doksumma")
    totalPrice.innerText = totalAmount.toFixed(2)
}

<table id="order-products" class="mobileorder-table">
    <colgroup>
        <col style="width: 80%;">
        <col style="width: 10%;">
        <col style="width: 10%;">
    </colgroup>

    <tbody>
        <tr>
            <td>
                Product1
            </td>
            <td>
                <span class="mobileorder-price">0.98</span>
            </td>
            <td>
                <input data-product="4750211645618" class="quantity" id="product_Soodkogus" name="product.Soodkogus"
                    type="number" min="0" max="999999" value="" onblur="orderSumRefresh()" />
            </td>
        </tr>
    </tbody>
</table>
Order total <p id="js-doksumma"></p>

I recommend utilizing console.log() to debug and evaluate variables for any potential coding errors.

Answer 3

Answer №2

It is important to note that table.rows is not an array, but rather an HTMLCollection. To address this issue, you can easily rectify it by:

  const table = document.getElementById("order-products")
  for (const row of Array.from(table.rows)) {
  }

If you'd like to verify the presence of a "length" property being looped through, inspect the table in the elements tab of the dev tools and execute the following snippet in the console:

for (let i in $0.rows) {
    console.log(i);
    console.log($0.rows[i].cells[0]);
}

You will observe that during the final iteration, "length" is printed before triggering an exception.

Answer 4

It is important to note that table.rows is not an array, but rather an HTMLCollection. To address this issue, you can easily rectify it by:

  const table = document.getElementById("order-products")
  for (const row of Array.from(table.rows)) {
  }

If you'd like to verify the presence of a "length" property being looped through, inspect the table in the elements tab of the dev tools and execute the following snippet in the console:

for (let i in $0.rows) {
    console.log(i);
    console.log($0.rows[i].cells[0]);
}

You will observe that during the final iteration, "length" is printed before triggering an exception.

Answer 5

Answer №3

Your issue starts here

for (let i in table.rows) {}

The values will be "0" and "length" (not the index as expected), which causes an error when trying to access row.cells[0].childNodes (row.cells is undefined)

I recommend updating it to

for (const row of table.rows) {}

The complete code would look like this:

function parseFloatFormatted(txt) {
  if (typeof txt !== 'string' || txt === null || txt === "") {
    return 0
  }
  return parseFloat(txt.replace(',', '.').replace(' ', ''))
}

function orderSumRefresh() {
  let totalAmount = 0
  const table = document.getElementById("order-products")
  for (const row of table.rows) {
    const price = row.cells[1].childNodes[0].innerHTML
    const quantity = row.cells[2].childNodes[0].innerText
    const rowTotal = Math.round(parseFloatFormatted(price) * parseFloatFormatted(quantity) * 100) / 100
    totalAmount += rowTotal
  }
  const docTotal = document.getElementById("js-doksumma")
  docTotal.innerText = totalAmount.toFixed(2)
}

<table id="order-products" class="mobileorder-table">
  <colgroup>
    <col style="width: 80%;">
    <col style="width: 10%;">
    <col style="width: 10%;">
  </colgroup>

  <tbody>
    <tr>
      <td>
        Product1
      </td>
      <td>
        <span class="mobileorder-price">0,98</span>
      </td>
      <td>
        <input data-product="4750211645618" class="quantity" id="product_Soodkogus" name="product.Soodkogus" type="number" min="0" max="999999" value="" onblur="orderSumRefresh()" />
      </td>
    </tr>
  </tbody>
</table>
Order total
<p id="js-doksumma"></p>

Answer 6

Your issue starts here

for (let i in table.rows) {}

The values will be "0" and "length" (not the index as expected), which causes an error when trying to access row.cells[0].childNodes (row.cells is undefined)

I recommend updating it to

for (const row of table.rows) {}

The complete code would look like this:

function parseFloatFormatted(txt) {
  if (typeof txt !== 'string' || txt === null || txt === "") {
    return 0
  }
  return parseFloat(txt.replace(',', '.').replace(' ', ''))
}

function orderSumRefresh() {
  let totalAmount = 0
  const table = document.getElementById("order-products")
  for (const row of table.rows) {
    const price = row.cells[1].childNodes[0].innerHTML
    const quantity = row.cells[2].childNodes[0].innerText
    const rowTotal = Math.round(parseFloatFormatted(price) * parseFloatFormatted(quantity) * 100) / 100
    totalAmount += rowTotal
  }
  const docTotal = document.getElementById("js-doksumma")
  docTotal.innerText = totalAmount.toFixed(2)
}

<table id="order-products" class="mobileorder-table">
  <colgroup>
    <col style="width: 80%;">
    <col style="width: 10%;">
    <col style="width: 10%;">
  </colgroup>

  <tbody>
    <tr>
      <td>
        Product1
      </td>
      <td>
        <span class="mobileorder-price">0,98</span>
      </td>
      <td>
        <input data-product="4750211645618" class="quantity" id="product_Soodkogus" name="product.Soodkogus" type="number" min="0" max="999999" value="" onblur="orderSumRefresh()" />
      </td>
    </tr>
  </tbody>
</table>
Order total
<p id="js-doksumma"></p>

Ways to calculate the total order amount when the quantity is modified

Answer №1

Answer №2

Answer №3

Similar questions

Trigger a function when the value of the file input field changes using ng-change

Issues are arising with the for loop in an express node js app using ejs, as it is not displaying the intended data and

Showing the `ViewBag` data within the `@Html.DropDownListFor` method enclosed

JavaScript Numbers Having Strange Behavior

Using jQuery that has been installed via npm within an Express application

Issue with Vue-Multiselect: Unselecting a group of pre-loaded values is not functioning as expected

Track user engagement across multiple platforms

bootstrap 4 appears to encounter some responsiveness issues when it comes to rendering on iPhone

The Google Share button may fail to be displayed correctly if it was initially hidden

Angular: Identifier for Dropdown with Multiple Selection

I need assistance with this ajax/javascript/php

Tips on connecting a file upload button to a flip card

Transforming a Bootstrap 4 dropdown navbar by replacing the caret with Fontawesome 5 icons for Plus and Minus

Problems Arising with HTML Form Functionality

Discovering a specific value within a JSON stringified array

What is the best way to interrupt an animation and restart it?

PHP file secured to only accept variables posted from HTML form

Developing a trivia game using HTML and JavaScript

Expiration Date of Third-Party Cookies

Wrapping header text in Vuetify's v-data-table