This is html code that i can't edit :
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Expense name</th>
<th scope="col">Value per unity (lei)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Water</td>
<td class="expense">62</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Netflix subscription</td>
<td class="expense">49.50</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Juice</td>
<td class="expense">16.40</td>
</tr>
<tr>
<th scope="row">4</th>
<td>New phone</td>
<td class="expense">2599</td>
</tr>
</tbody>
</table>
<h2>
Total expenses this month (lei):
<div id="total-expenses"></div>
</h2>
My question is : How do i do that in code(javascript)? I have something in my head but i don t know how to write that. What i have in head is: i declare variable for expenses,or using this queryselector(but i don t know how to point at specific td, because i have 2 td's in 1 tr) and after i can make a function with sum of that column, but i don't know how to write that in code. Can someone help me
First, you need to select all nodes that have .expense. Then you should iterate and calculate the total. After that write the total into #total-expenses.
// select nodes for expense
const expenceNodes = document.querySelectorAll('.expense');
let total = 0.0;
// calculating total
expenceNodes.forEach(node => {
total += parseFloat(node.innerText);
})
// write total
document.getElementById('total-expenses').innerText = total.toFixed(2);<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Expense name</th>
<th scope="col">Value per unity (lei)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Water</td>
<td class="expense">62</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Netflix subscription</td>
<td class="expense">49.50</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Juice</td>
<td class="expense">16.40</td>
</tr>
<tr>
<th scope="row">4</th>
<td>New phone</td>
<td class="expense">2599</td>
</tr>
</tbody>
</table>
<h2>
Total expenses this month (lei):
<div id="total-expenses"></div>
</h2>