Add and display the contents of a column using Javascript

Question

<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?

I want to use Javascript only

Yesha Majmundar
– Yesha Majmundar

2020-10-22 15:52:06 +00:00
Commented Oct 22, 2020 at 15:52 — Yesha Majmundar
– Yesha Majmundar, Commented Oct 22, 2020 at 15:52

Ahmed Yousif · Accepted Answer · 2020-10-22 15:59:02Z

3

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

edited Oct 22, 2020 at 15:59

answered Oct 22, 2020 at 15:52

Ahmed Yousif

2,3481 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cs641311 · Accepted Answer · 2020-10-22 15:54:43Z

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>

ZaO Lover · Accepted Answer · 2020-10-22 15:57:44Z

1

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 = ''

answered Oct 22, 2020 at 15:57

ZaO Lover

4352 silver badges13 bronze badges

Comments

audzzy · Accepted Answer · 2020-10-22 18:05:16Z

1

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

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

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

answered Oct 22, 2020 at 18:05

audzzy

7411 gold badge5 silver badges12 bronze badges

Collectives™ on Stack Overflow

Add and display the contents of a column using Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related