Adding and subtracting from a table with java script.

Question

Mark_65 0 Newbie Poster

7 Years Ago

The following code will allow me to add a table row line and I can add the starting amount with the first amount input into the first row, but if I add a row and enter in an amount I want it to add or subtract that as well. Thanks in advanced!

Here is my code.

<!DOCTYPE html> <html lang="en"> <head> <title>Finance</title> <meta charset="UTF-8"> <meta name="finance" content="width=device-width, initial-scale=1.0"> <script src="insertrow.js"></script> <script src="calc.js"></script> <style>
table {
    padding-top: 15px;
}

button{
    margin-left: 15px;
    cursor: pointer;
}
</style> </head> <body> <h1>Financial Keeps</h1> <button onclick="insertRow()">Add</button> <button onclick="deleteRow()">Delete</button> <button>Save</button> <p><b>Starting Amount: <input type="text" id="tb1" name="tb1" onkeyup="calc(this)"/></b></p> <p>To subtract an amount place a minus (-) sign infront of the dollar amount.</p> <table id="myTable"> <tr> <th>Bill Info</th> <th>Bill Amt</th> <th>Due Date</th> <th></th> </tr> <tr> <td><input type="text" id="text"/></td> <td><input type="number" id="number" onkeyup="calc(this)" /></td> <td><input type="text" id="text" /></td> <td><input type="checkbox" id="checkbox" /></td> </tr> </table> <p><b>Ending Amount: <span id="update">0</span></b></p> <input type="hidden" id="total" name="total" value="0" /> </body> </html>

function insertRow() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(table.rows.length)

        var cell1=row.insertCell(0);
        var t1=document.createElement("input");
            t1.id = "text";
            cell1.appendChild(t1);

        var cell2=row.insertCell(1);
        var x = document.createElement("input");
            x.setAttribute("type","number");
            cell2.appendChild(x);

        var cell3=row.insertCell(2);
        var y = document.createElement("input");
            y.setAttribute("type", "text");
            cell3.appendChild(y);

        var cell4=row.insertCell(3);
        var z = document.createElement("input");
            z.setAttribute("type", "checkbox");
            cell4.appendChild(z);;
}

function deleteRow() {
    document.getElementById("myTable").deleteRow(2);
}   

       var x = 0;
        var y = 0;
        var z = 0;
        function calc(obj) {
            var e = obj.id.toString();
            if (e == 'tb1') {
                x = Number(obj.value);
                y = Number(document.getElementById('tb2').value);
            } else {
                x = Number(document.getElementById('tb1').value);
                y = Number(obj.value);
            }
            z = x + y;
            document.getElementById('total').value = z;
            document.getElementById('update').innerHTML = z;
        }

table

2 Contributors
1 Reply
2K Views
18 Hours Discussion Span
Latest Post 7 Years Ago Latest Post by broj1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

broj1 356 Humble servant Featured Poster · Answer 1 · 2017-03-07T14:52:01+00:00

EDIT: I noticed after posting that the javascript functions are meant to be in a separate JS file. Disregard my 1. remark, sorry.

Had a quick look at the code and there are two obvious error:

The Javascript functions are outside the <html></html> and outside the <body></body> pairs which is not OK. You should put them just before the closing </body> tag.
On line 48 document.getElementById('tb2') an element with ID='tb2' does not exist

The correct code would be (nicely formated):

<!DOCTYPE html> <html lang="en"> <head> <title>Finance</title> <meta charset="UTF-8"> <meta name="finance" content="width=device-width, initial-scale=1.0"> <script src="insertrow.js"></script> <script src="calc.js"></script> <style>
table {
    padding-top: 15px;
}

button{
    margin-left: 15px;
    cursor: pointer;
}
</style> 
</head>
<body> 
<h1>Financial Keeps</h1> 

<button onclick="insertRow()">Add</button> 
<button onclick="deleteRow()">Delete</button> 
<button>Save</button> 
<p><b>Starting Amount: <input type="text" id="tb1" name="tb1" onkeyup="calc(this)"/></b></p> 
<p>To subtract an amount place a minus (-) sign infront of the dollar amount.</p> 

<table id="myTable"> 
<tr> <th>Bill Info</th> <th>Bill Amt</th> <th>Due Date</th> <th></th> </tr> 
<tr> 
<td><input type="text" id="text"/></td> 
<td><input type="number" id="number" onkeyup="calc(this)" /></td> 
<td><input type="text" id="text" /></td> 
<td><input type="checkbox" id="checkbox" /></td> 
</tr> 
</table> 

<p><b>Ending Amount: <span id="update">0</span></b></p> <input type="hidden" id="total" name="total" value="0" /> 
<script>
function insertRow() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(table.rows.length)

    var cell1=row.insertCell(0);
    var t1=document.createElement("input");
        t1.id = "text";
        cell1.appendChild(t1);

    var cell2=row.insertCell(1);
    var x = document.createElement("input");
        x.setAttribute("type","number");
        cell2.appendChild(x);

    var cell3=row.insertCell(2);
    var y = document.createElement("input");
        y.setAttribute("type", "text");
        cell3.appendChild(y);

    var cell4=row.insertCell(3);
    var z = document.createElement("input");
        z.setAttribute("type", "checkbox");
        cell4.appendChild(z);;
}

function deleteRow() {
    document.getElementById("myTable").deleteRow(2);
}   

var x = 0;
var y = 0;
var z = 0;
function calc(obj) {
    var e = obj.id.toString();
    if (e == 'tb1') {
        x = Number(obj.value);
        y = Number(document.getElementById('tb2').value);
    } else {
        x = Number(document.getElementById('tb1').value);
        y = Number(obj.value);
    }
    z = x + y;
    document.getElementById('total').value = z;
    document.getElementById('update').innerHTML = z;
    }
</script>
</body> </html>

Maybe an error in your logic would be easier to spot after these errors have been corrected. If not, I will have more time later today to look at the thing.