使用 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>

我试图在单击提交按钮后将表单中给出的输入插入 table，并在该特定条目后打印总金额。但这里的金额只是作为字符串附加到总数上。例如-总计的初始值为 0，当金额为 2 时，总计应变为“2”，但它变为“02”。我该如何解决这个问题？

Answer 1

您应该将值转换为数字，如下所示

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

因为下面语句返回的值默认是字符串

document.getElementById("amount").value

有关输入值的更多信息，您可以查看此 link

Answer 2

替换为：

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

与：

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>

Answer 3

如果你想使用total变量作为数字，你应该写

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

或者如果你想使用total作为字符串，你应该像下面这样重写

var total = ''

Answer 4

您也可以使用一元运算符 + 转换为数字..

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

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

使用 Javascript 添加和显示列的内容

Add and display the contents of a column using Javascript

javascript

html-table

cumulative-sum