无法获取输入的值

Question

I have a function in which I create an input like

tr = document.createElement("tr");
td1 = document.createElement("td");
td2 = document.createElement("td");
td1.appendChild(document.createTextNode("Number:"));
td2.appendChild(document.createElement("input"));
td2.setAttribute("id", "nr");
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);

Afterward, I want to get the value of it in another function with:

var nr = document.getElementById("nr").value;

it will know the nr element but the value is undefined

Answer 1

As @takendarkk said, the <td> tag doesn't have a value attribute.

In your code, define in a different variable the input creation so you can give it an id to referrer later, like this:

let tr = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let input = document.createElement("input"); // Created input
input.setAttribute("id","nr"); // Given an id
td1.appendChild(document.createTextNode("Number:"));
td2.appendChild(input); // Appended the input element previously created
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);

As @AlexeyZelenin suggested, you should use let or var on variable definitions to prevent modifying another variable outside the current scope.

Look at an example:

Press the button to get the value of the input.

 const table = document.querySelector("table"); function createRow() { let tr = document.createElement("tr"); let td1 = document.createElement("td"); let td2 = document.createElement("td"); let input = document.createElement("input"); input.setAttribute("id","nr"); td1.appendChild(document.createTextNode("Number:")); td2.appendChild(input); tr.appendChild(td1); tr.appendChild(td2); table.appendChild(tr); } createRow(); function showValue(){ console.log(document.getElementById("nr").value); } 

 <table></table><button onclick="showValue()">Show value</button> 

Answer 2

这行设置的是<td>的ID，而不是附加的子输入元素的ID：

td2.setAttribute("id", "nr");