why is input.value undefined?

I am using JavaScript to grab the value of an input, however, the input is coming back as undefined. I originally put the row in using insertrow and a variable. The row uses a variable as its value because each row is different. Later I call the add section to try and add up all of the numbers in a given column. However, when I call the function and the alert comes back it simply says undefined yet in the actual table on the page the value is there. Why is the value coming back as undefined?

var myHtmlContent = "<tr><td>" + dwgno + "</td><td>" 
+ desc + "</td><td>" 
+ prof + "</td><td>" 
+ piec + "</td><td>" 
+ len + "</td><td>" 
+ ibft + "</td><td>" 
+ obs + "</td><td><input type='number' value=" + bud + "></input></td>" +
"<td><input type='number' value=" + mscmat + "></input></td>" +
"<td><input type='number' value=" + galfin + "></input></td>" +
"<td><input type='number' value=" + fab3 + "></input></td>" +
"<td><input type='number' value=" + ins3 + "></input></td>" +
"<td><input type='number' value=" + ins4 + "></input></td>" +
"</td></tr>"
var tableRef = document.getElementById('myTablesecond').getElementsByTagName('tbody')[0];

var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;

// add function:
var table = document.getElementById("myTablesecond");
            
    for (var i = 1, row; row = table.rows[i]; i++) {
        alert(row.cells[7].value);
        total+=parseFloat(row.cells[7].innerhtml) || 0;
    }

>Solution :

<input> elements have values, <td> elements do not. row.cells is a collection of the latter.

You might be looking for row.cells[7].children[0].value

Nothing has an innerhtml. The property is innerHTML.

Leave a Reply