Question 235662 in Html Question posted in
Some basic documentation can be found here.

Html – 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;
    }
Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    Your approach is really not right here. There is no reason to write all that HTML as strings to be concatenated with variables. Instead, hard code the HTML you know you’ll need and just supply content to the elements as needed. In many cases, this will allow you to avoid using innerHTML (not innerhtml) as .innerHTML has security and performance implications and should be avoided when possible.

    Keep in mind that input elements do not get closing tags and that non-form elements don’t have a value, they have textContent.

    Lastly, while I have shown my example using tables (as you have shown in your question), be aware that you should not be using tables for layout purposes (use CSS for that). Tables are only for displaying tabular data.

    // Declare and initialize variables
let dwgno = "lorem";
let desc = "ipsum";
let prof = "tollas";
let piec = "verdam";
let len = "vollet";
let ibft = "tolar";
let obs = "sipsum";
let bud = 1;
let mscmat = 2;
let galfin = 3;
let fab3 = 4;
let ins3 = 5;
let ins4 = 6;

// populate inputs
document.querySelector("#dwgno").textContent = dwgno;
document.querySelector("#desc").textContent = desc;
document.querySelector("#prof").textContent = prof;
document.querySelector("#piec").textContent = piec;
document.querySelector("#len").textContent = len;
document.querySelector("#ibft").textContent = ibft;
document.querySelector("#obs").textContent = obs;
document.querySelector("#bud").value = bud;
document.querySelector("#mscmat").value = mscmat;
document.querySelector("#galfin").value = galfin;
document.querySelector("#fab3").value = fab3;
document.querySelector("#ins3").value = ins3;
document.querySelector("#ins4").value = ins4;
    <table>
  <tr>
    <td><span id="dwgno"></span></td>
    <td><span id="desc"></span></td>
    <td><span id="prof"></span></td>
    <td><span id="piec"></span></td>
    <td><span id="len"></span></td>
    <td><span id="ibft"></span></td>    
    <td><span id="obs"></span></td>       
  </tr>
  <tr>
    <td><input type="number" id="bud"></td>
    <td><input type="number" id="mscmat"></td>
    <td><input type="number" id="galfin"></td>
    <td><input type="number" id="fab3"></td>
    <td><input type="number" id="ins3"></td>
    <td><input type="number" id="ins4"></td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search