CODEWITHSUNDEEP
javascripthtml-tablecumulative-sum
Yesha Majmundar
Yesha Majmundar

Reputation: 49

Add and display the contents of a column using Javascript

<html>
    <head>
        <title>Expense Tracker</title>
        
        <style type="text/css">
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button 
            {
                -webkit-appearance: none;
                margin: 0;
            }
            
            table
            {
                display: none;
            }
        
            td,th
            {
                text-align: center;
            }
            
            th,td
            {
                border: 1px solid black;
            }
        </style>
    </head>
    
    <body>
        <h1>Expense Tracker</h1>
        
        <form action="">
            <label for="date">Date: </label>
            <input type="date" id="date">
            <br>
            
            <label for="desc">Description: </label>
            <input type="text" id="desc">
            <br>
            
            <label for="amount">Amount: </label>
            <input type="number" id="amount">
            <br>
            
            <input type="button" id="submit" value="Submit">
            <br>
        </form>
        
        <table id="table">
            <tr>
                <th>Date</th>
                <th>Description</th>
                <th>Amount</th>
            </tr>
        </table>
        
        <div id="total"></div>
    
        <script type="text/javascript">
            var total = 0;
            
            document.getElementById("submit").onclick=function()
            {
                document.getElementById("table").style.display="block";
                
                var table = document.getElementById("table");
                var row = table.insertRow(-1);
                var date = row.insertCell(0);
                var desc = row.insertCell(1);
                var amt = row.insertCell(2);
                date.innerHTML = document.getElementById("date").value;
                desc.innerHTML = document.getElementById("desc").value;
                amt.innerHTML = document.getElementById("amount").value;
                
                total += document.getElementById("amount").value;
                document.getElementById("total").innerHTML = 'Total: ' + total;
                
                return false;
            }
        </script>
    </body>
</html>

I am trying to insert the input given in the form into the table after the submit button is clicked and print the total amount after that particular entry. But here the amount is just appended to the total as in a string. Eg- The initial value of total is 0 and when amount is 2 the total should become '2' but instead, it becomes '02'. How do I fix this?

Here is the output

Upvotes: 0

Views: 513

Answers (4)

audzzy
audzzy

Reputation: 741

You could also use unary operator + which converts to number..

total += +document.getElementById("amount").value;

https://www.javascripttutorial.net/javascript-unary-operators/

Upvotes: 1

Ahmed Yousif
Ahmed Yousif

Reputation: 2348

You should cast the value into number as following

total += Number(document.getElementById("amount").value)

because the value returned from the following statement is a string by default

document.getElementById("amount").value

for more information about input value you can check this link

Upvotes: 3

ZaO Lover
ZaO Lover

Reputation: 433

If you want to use total variable as a number, you should write

total += Number(document.getElementById("amount").value)

Or if you want to use total as a string, you should rewrite like below

var total = ''

Upvotes: 1

cs641311
cs641311

Reputation: 100

Replace this:

total += document.getElementById("amount").value;

with:

total += JSON.parse(document.getElementById("amount").value); //JSON.parse turns 


<html>
    <head>
        <title>Expense Tracker</title>
        
        <style type="text/css">
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button 
            {
                -webkit-appearance: none;
                margin: 0;
            }
            
            table
            {
                display: none;
            }
        
            td,th
            {
                text-align: center;
            }
            
            th,td
            {
                border: 1px solid black;
            }
        </style>
    </head>
    
    <body>
        <h1>Expense Tracker</h1>
        
        <form action="">
            <label for="date">Date: </label>
            <input type="date" id="date">
            <br>
            
            <label for="desc">Description: </label>
            <input type="text" id="desc">
            <br>
            
            <label for="amount">Amount: </label>
            <input type="number" id="amount">
            <br>
            
            <input type="button" id="submit" value="Submit">
            <br>
        </form>
        
        <table id="table">
            <tr>
                <th>Date</th>
                <th>Description</th>
                <th>Amount</th>
            </tr>
        </table>
        
        <div id="total"></div>
    
        <script type="text/javascript">
            var total = 0;
            
            document.getElementById("submit").onclick=function()
            {
                document.getElementById("table").style.display="block";
                
                var table = document.getElementById("table");
                var row = table.insertRow(-1);
                var date = row.insertCell(0);
                var desc = row.insertCell(1);
                var amt = row.insertCell(2);
                date.innerHTML = document.getElementById("date").value;
                desc.innerHTML = document.getElementById("desc").value;
                amt.innerHTML = document.getElementById("amount").value;
                
                total += JSON.parse(document.getElementById("amount").value);
                document.getElementById("total").innerHTML = 'Total: ' + total;
                
                return false;
            }
        </script>
    </body>
</html>

Upvotes: 1

Related Questions