How do i add and get the total of all my expenses value in javascript

Question

I dont know if am doing it wrongly, but i want to add all my expenses value, but instead of adding and giving me the sum of my value, it concatenate them together, how do i solve that?

html code: This is just a table for my list

                    <table>
                        <tr>
                            <th>Expenses Title</th>
                            <th>Expense Value</th>
                            <th></th>
                        </tr>
                        
                        <tr>
                            <td>egg</td>
                            <td class="expenses_value">350</td>
                            <td>Edit</td>
                            <td class="remove_button">Delete</td>
                        </tr>
                        <tr>
                            <td>Bread</td>
                            <td class="expenses_value">340</td>
                            <td>Edit</td>
                            <td class="remove_button">Delete</td>
                        </tr>
                        <tr>
                            <td>fish</td>
                            <td class="expenses_value">90</td>
                            <td>Edit</td>
                            <td class="remove_button">Delete</td>
                        </tr>

                    </table>

here is the function i coding to perform my task, but instead it concatenate my figures. Javascript code(vanilla Javascript) I'm a beginner i need a best approach for this. thank you.

let expense_value = document.getElementsByClassName("expenses_value");
let sum = 0
for(let i = 0; i < expense_value.length; i++){
   let newVal = expense_value[i].innerHTML;
   sum = sum + newVal;
   console.log(sum)
}

any help or suggestions

Please research your issue before asking in accordance with [ask]. Duplicate of [Adding two numbers concatenates them instead of calculating the sum](https://stackoverflow.com/questions/14496531/adding-two-numbers-concatenates-them-instead-of-calculating-the-sum) — esqew, Jul 19 '22 at 18:23

score 1 · Answer 1 · answered Jul 19 '22 at 18:17

The innerHTML will provide the number as string to convert it back to number, you can make it start with +, For Example +expense_value[i].innerHTML or You can use Number().

let expense_value = document.getElementsByClassName("expenses_value");
let sum = 0
for(let i = 0; i < expense_value.length; i++){
   let newVal = +expense_value[i].innerHTML;
   sum = sum + newVal;
}
console.log(sum)

                    <table>
                        <tr>
                            <th>Expenses Title</th>
                            <th>Expense Value</th>
                            <th></th>
                        </tr>
                        
                        <tr>
                            <td>egg</td>
                            <td class="expenses_value">350</td>
                            <td>Edit</td>
                            <td class="remove_button">Delete</td>
                        </tr>
                        <tr>
                            <td>Bread</td>
                            <td class="expenses_value">340</td>
                            <td>Edit</td>
                            <td class="remove_button">Delete</td>
                        </tr>
                        <tr>
                            <td>fish</td>
                            <td class="expenses_value">90</td>
                            <td>Edit</td>
                            <td class="remove_button">Delete</td>
                        </tr>

                    </table>

Depending on how you would like to handle unexpected values in those cells, you can improve type safety by checking that the type coercion doesn't return `NaN`. `let rawExpenseVal = expense_value[i].innerHTML; let newVal = isNaN(+rawExpenseVal) ? 0 : +rawExpenseVal;` — Jared A Sutton, Jul 19 '22 at 18:22
@mina i used the ```Number()```, and it worked. thank you buddy — dynamitetech, Jul 19 '22 at 18:24

score 1 · Answer 2 · answered Jul 19 '22 at 18:21

1

the variable newVal is of type string so it will by default cancatenate strings .Firstly, you need to change its type from String to Int thanks to " parseInt(newVal) "
you can change it here

let newVal = parseInt(expense_value[i].innerHTML);

or here

sum = sum + parseInt(newVal);

answered Jul 19 '22 at 18:21

Bassem Ben Ghorbel

31
3

We should not assume that these values would always be integers. – Jared A Sutton Jul 19 '22 at 18:24
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Coder Gautam YT Jul 20 '22 at 19:02

How do i add and get the total of all my expenses value in javascript

2 Answers2