getElementsByName: doesn't work

Question

My function calc() is not working !!

Here I want to multiply the data in the field Price and Amount and put it in field sum.

It works for first row when I use getElementsById, but when I add new row this don't work for the new row data.

Please tell me if I can do it with getElementsByName or getElementsById ??

function addRow(billingTable) 
{
            var table = document.getElementById(billingTable);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[0].cells.length;

    for (var i = 0; i < colCount; i++) 
    {
        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) 
        {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
        }
    }
}

function deleteRow(billingTable) 
{
    try {
        var table = document.getElementById(billingTable);
        var rowCount = table.rows.length - 1;

        for (var i = 1; i <= rowCount; i++) 
        {

            var row = table.rows[i];

            var chkbox = row.cells[0].children[0];
            if (null != chkbox && true == chkbox.checked) 
            {
                if (rowCount <= 1) 
                {
                    alert("Alle zeilen kann nicht gelöscht werden.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }

        }
    } catch(e) 
    {
        alert(e);
    }
}
function calc()
{

    var amount = document.c("Amount")[0];
    alert(amount);
    var price = document.getElementsByName("Price");
    document.getElementsByName('Sum') . value = amount*price;

}



<table border="1" id="billingTable">
            <tr>
                <th></th>
                <th>Position</th>
                <th>Amount</th>
                <th>Price</th>
                <th>Sum</th>
            </tr>
            <tr>
                <td>
                <INPUT type="checkbox" name="chk"/>
                </td>
                <td>
                <input type="text" name="Position" style="width: 140px"/>
                </td>
                <td>
                <input type="text" id="Amount_1" name="Amount" style="width: 140px"/>
                </td>
                <td>
                <input type="text" id="Price_1" name="Price" style="width: 139px" onchange="calc()"/>
                </td>
                <td>
                <input type="text" id="Sum_1" name="Sum" style="width: 139px"/>
                </td>
            </tr>


        </table>

[`getElementsByName()`](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName) returns an array-like [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), not an individual element. — Teemu, Jun 11 '13 at 09:58

score 1 · Answer 1 · answered Jun 11 '13 at 10:02

1

Try,

Change

var price = document.getElementsByName("Price");
document.getElementsByName('Sum') . value = amount*price;

to

var price = document.getElementsByName("Price")[0]. value;
document.getElementsByName('Sum')[0]. value = amount*price;

answered Jun 11 '13 at 10:02

Satpal

132,252
13
159
168

It calculate the Sum for only first row When I add a new row the calculation does not work !! – user2140616 Jun 11 '13 at 10:10
@user2140616 you have to loop through elements – Satpal Jun 11 '13 at 10:13

score 1 · Accepted Answer · answered Jun 11 '13 at 10:02

The method getElementsByName returns a node list which can be used like an array. What you need to do is grab them and loop over them to do the calculation for all rows.

function calc()
{
    var amounts = document.getElementsByName("Amount");
    var prices = document.getElementsByName("Price");
    var sums = document.getElementsByName('Sum');

    for(var i=0; i<amounts.length; i++)
    {
        sums[i].value = amounts[i].value * prices[i].value;
    }
}

getElementsByName: doesn't work

2 Answers2