07.SumTable

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Homework-DOM</title>
    </head>

    <body>
    <table>
        <tbody>
        <tr><th>Product</th><th>Cost</th></tr>
        <tr><td>Beer</td>   <td>2.88</td></tr>
        <tr><td>Fries</td>  <td>2.15</td></tr>
        <tr><td>Burger</td> <td>4.59</td></tr>
        <tr><td>Total:</td> <td id="sum"></td></tr>
        </tbody>
    </table>
    <button onclick="sum()">Sum</button>

    <script>
        function sum() {
            let pricesCollection = document.querySelectorAll('td:last-child');
            let result = [];
            let total = document.getElementById('sum');

            for(let i = 0; i < pricesCollection.length; i++){
                let price = Number(pricesCollection[i].textContent);
                result.push(price);
            }

            total.textContent = result.reduce((a,b) => a + b);
        }
    </script>

    </body>
</html>