JavaScript calculations are not functioning as anticipated

Question

JavaScript calculations are not functioning as anticipated

I am encountering an issue with a gridview that contains a row where integer values, such as 7000, are being added.

My goal is to calculate the total of all these rows and display it in a textbox after 2-3 rows have been added.

To achieve this, I have implemented the following code snippet:

if (document.getElementById('txtTotalExp').value == "") {
            var Expense = 0;
        } else {
            var Expense = document.getElementById('txtTotalExp').value;
        }
        for (var i = 0; i < GridExpInfo.Rows.length; i++) {
            var totAmount = GridExpInfo.Rows[i].Cells[7].Value;
            var totval = totAmount;
            Expense += parseInt(totval);
        }

document.getElementById('txtTotalLandVal').value = parseInt(TotalPayableValue) + parseInt(Expense);

However, when checking the textbox, I am seeing a result like 200010001512.

It seems that the addition operation is not functioning correctly.

javascript asp.net gridview

Answer 1

Answer №1

Upon reviewing your inquiry, it seems that you are dealing with a tabular structure containing rows of values. Your objective is to compute the sum for each row and then obtain the total sum of all these individual row sums within the entire table.

I aimed to present a functioning code snippet as a demonstration of how to tackle this issue. However, since not all the essential code components were provided, I improvised some sections. In the process, I introduced an alternative method, which could be considered more contemporary, for resolving the overarching problem you appear to be addressing. While this may extend beyond your initial query (...though some of the other responses discussing parseInt might address your immediate concern), my intention is to offer additional insights.

Below is an illustration showcasing the implementation using various modern JavaScript functionalities. The accompanying comments have been included to elucidate the operations at each stage comprehensively, allowing for a better understanding of the logic involved. To delve deeper into grasping each step, further exploration into mastering JavaScript would be beneficial. A recommended resource is the Mozilla Developer Network (MDN), offering comprehensive documentation on these features.

// Upon clicking the button, execute the following actions...
document.querySelector('button').onclick = () => {

  // Calculate the total sum across the table
  const rowSums =

    // Obtain a nodeList of all table rows in the document
    // and convert the array-like nodeList into an actual array
    // comprising table row elements
    [...document.querySelectorAll('tr')]

      // Exclude the first row, which represents the column headers
      .slice(1)

      // Create a new array from the original table rows (excluding the first row)
      // where each element is derived based on the respective table row from the original array
      .map(row => {

        // Compute the sum of values within the specific row
        const rowSum =

          // Retrieve a nodeList of all table cells in the row
          // and transform the array-like nodeList into an actual array
          // consisting of table cell elements
          [...row.querySelectorAll('td')]

            // Omit the last cell, representing the one holding the final sum for this row
            .slice(0,-1)

            // From the array of table cells within this row (excluding the last one)
            // derive a single value by progressively performing a task for each cell
            .reduce(

              // For every table cell within this row, retain the cell itself
              // along with the accumulating value being generated gradually through all
              // cells in the row, essentially representing the sum of all values within this row
              (accumulatingRowSum, cell) =>

                // Add the numerical value of the current cell to the sum of values being accumulated
                // throughout this row for each cell
                accumulatingRowSum + parseInt(cell.innerHTML, 10),

              // Initiate the cumulative sum of values within this row from zero
              0
            );

        // Retrieve all cells within this row
        const rowCells = row.querySelectorAll('td');

        // Populate the last cell of the row with the sum of values from this row
        rowCells[rowCells.length - 1].innerHTML = rowSum;

        // Insert the sum of values within this row into the growing array
        // encompassing all such values for all rows
        return rowSum;
  });
  
  // Determine the total sum for the entire table
  const totalExpenses =

    // Commence with the array of individual row sums
    rowSums

      // Similar to the previous `reduce` operation, aggregate the array of multiple row sums
      // into a solitary figure representing the overall total sum obtained by adding up
      // all individual row sums, initiating from zero
      .reduce((accumulatingTotalSum, rowTotal) => accumulatingTotalSum + rowTotal, 0);

  // Place the final sum within the designated span element
  document.querySelector('#txtTotalExp').innerHTML = totalExpenses;
};

table {
  border: solid black 1px;
  border-collapse: collapse;
}
th, td {
  border: solid black 1px;
  padding: 0.5em;
}

<table>
  <tr><th>Column 1</th><th>Column 2</th><th>Row Total</th></tr>
  <tr><td>3500</td><td>1200</td><td></td></tr>
  <tr><td>2700</td><td>4500</td><td></td></tr>
  <tr><td>3100</td><td>1300</td><td></td></tr>
</table>
<p>The total expenses amount to: <span id="txtTotalExp"></span></p>
<button>Calculate</button>

Answer 2

Upon reviewing your inquiry, it seems that you are dealing with a tabular structure containing rows of values. Your objective is to compute the sum for each row and then obtain the total sum of all these individual row sums within the entire table.

I aimed to present a functioning code snippet as a demonstration of how to tackle this issue. However, since not all the essential code components were provided, I improvised some sections. In the process, I introduced an alternative method, which could be considered more contemporary, for resolving the overarching problem you appear to be addressing. While this may extend beyond your initial query (...though some of the other responses discussing parseInt might address your immediate concern), my intention is to offer additional insights.

Below is an illustration showcasing the implementation using various modern JavaScript functionalities. The accompanying comments have been included to elucidate the operations at each stage comprehensively, allowing for a better understanding of the logic involved. To delve deeper into grasping each step, further exploration into mastering JavaScript would be beneficial. A recommended resource is the Mozilla Developer Network (MDN), offering comprehensive documentation on these features.

// Upon clicking the button, execute the following actions...
document.querySelector('button').onclick = () => {

  // Calculate the total sum across the table
  const rowSums =

    // Obtain a nodeList of all table rows in the document
    // and convert the array-like nodeList into an actual array
    // comprising table row elements
    [...document.querySelectorAll('tr')]

      // Exclude the first row, which represents the column headers
      .slice(1)

      // Create a new array from the original table rows (excluding the first row)
      // where each element is derived based on the respective table row from the original array
      .map(row => {

        // Compute the sum of values within the specific row
        const rowSum =

          // Retrieve a nodeList of all table cells in the row
          // and transform the array-like nodeList into an actual array
          // consisting of table cell elements
          [...row.querySelectorAll('td')]

            // Omit the last cell, representing the one holding the final sum for this row
            .slice(0,-1)

            // From the array of table cells within this row (excluding the last one)
            // derive a single value by progressively performing a task for each cell
            .reduce(

              // For every table cell within this row, retain the cell itself
              // along with the accumulating value being generated gradually through all
              // cells in the row, essentially representing the sum of all values within this row
              (accumulatingRowSum, cell) =>

                // Add the numerical value of the current cell to the sum of values being accumulated
                // throughout this row for each cell
                accumulatingRowSum + parseInt(cell.innerHTML, 10),

              // Initiate the cumulative sum of values within this row from zero
              0
            );

        // Retrieve all cells within this row
        const rowCells = row.querySelectorAll('td');

        // Populate the last cell of the row with the sum of values from this row
        rowCells[rowCells.length - 1].innerHTML = rowSum;

        // Insert the sum of values within this row into the growing array
        // encompassing all such values for all rows
        return rowSum;
  });
  
  // Determine the total sum for the entire table
  const totalExpenses =

    // Commence with the array of individual row sums
    rowSums

      // Similar to the previous `reduce` operation, aggregate the array of multiple row sums
      // into a solitary figure representing the overall total sum obtained by adding up
      // all individual row sums, initiating from zero
      .reduce((accumulatingTotalSum, rowTotal) => accumulatingTotalSum + rowTotal, 0);

  // Place the final sum within the designated span element
  document.querySelector('#txtTotalExp').innerHTML = totalExpenses;
};

table {
  border: solid black 1px;
  border-collapse: collapse;
}
th, td {
  border: solid black 1px;
  padding: 0.5em;
}

<table>
  <tr><th>Column 1</th><th>Column 2</th><th>Row Total</th></tr>
  <tr><td>3500</td><td>1200</td><td></td></tr>
  <tr><td>2700</td><td>4500</td><td></td></tr>
  <tr><td>3100</td><td>1300</td><td></td></tr>
</table>
<p>The total expenses amount to: <span id="txtTotalExp"></span></p>
<button>Calculate</button>

Answer 3

Answer №2

Here is the code snippet you can utilize:

let sum = parseInt(TotalPayableValue, 10) + parseInt(Expense, 10);
    document.getElementById('txtTotalLandVal').value = sum;

Answer 4

Here is the code snippet you can utilize:

let sum = parseInt(TotalPayableValue, 10) + parseInt(Expense, 10);
    document.getElementById('txtTotalLandVal').value = sum;

Answer 5

Answer №3

Check out this solution:

let totalExpense = 0;
if (document.getElementById('txtTotalExp').value !== "") {
 let expense = parseInt(document.getElementById('txtTotalExp').value);
}
for (let i = 0; i < GridExpInfo.Rows.length; i++) {
 let totalAmount = GridExpInfo.Rows[i].Cells[7].Value;
 totalExpense += parseInt(totalAmount);
}

The issue at hand is that the initial value of 'totalExpense' might be a string. Have you attempted to see if setting it as "totalExpense = 0" resolves the error?

Answer 6

Check out this solution:

let totalExpense = 0;
if (document.getElementById('txtTotalExp').value !== "") {
 let expense = parseInt(document.getElementById('txtTotalExp').value);
}
for (let i = 0; i < GridExpInfo.Rows.length; i++) {
 let totalAmount = GridExpInfo.Rows[i].Cells[7].Value;
 totalExpense += parseInt(totalAmount);
}

The issue at hand is that the initial value of 'totalExpense' might be a string. Have you attempted to see if setting it as "totalExpense = 0" resolves the error?

JavaScript calculations are not functioning as anticipated

Answer №1

Answer №2

Answer №3

Similar questions

Has anyone here had the opportunity to work with the @material-ui/pickers Calendar API before?

Resolving Null DateTime Property in MVC Model Through Ajax Post

I am looking to display multiple divs sequentially on a webpage using JavaScript

Organize Javascript objects based on their dates - group them by day, month,

Is there a way to make a jQuery dialog function similarly to a JavaScript alert box?

Can you explain the distinction between postMessage() and dispatchEvent() in relation to the origin policy?

How to retrieve a JSON item without knowing the name of the parent key

Trouble with filtering in the Bootstrap table control feature

Put a pause on running a JavaScript function until the one preceding it has completed

Is it possible to simultaneously send a JSON object and render a template using NodeJS and AngularJS?

Perform calculations using the corresponding data table within the model

Eliminating identical characters shared between two strings

Is it true that one line arrow functions cannot include a semicolon without braces?

Encountering an error while attempting to integrate react-router with react-transition-group: "Invalid element type specified..."

Vue is refusing to display information for a certain API call

Is the global.asax file compatible with DotNet class library projects?

A guide on utilizing a function import within an exported function within ReactJS

Encountering problem: 'Dom7 is undefined' while initializing a Framework7 - Vue application using Webpack

Having issues with jQuery animation not working correctly?

Preventing Angular $rootElement.on('click') from affecting ReactJS anchor tag interactions