Question

我有一个函数，可以在其中创建类似

的输入

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);

然后，我想通过以下方法在另一个函数中获取它的值：

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

它将知道nr元素，但值为undefined

Answer 1

正如@takendarkk所说，<td>标签没有value属性。

在您的代码中，用一个不同的变量定义输入创建，以便您可以给它一个id以便稍后引用，例如：

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);

正如@AlexeyZelenin所建议的那样，您应该在变量定义上使用let或var，以防止在当前作用域之外修改另一个变量。

看一个例子：

按下按钮以获取输入值。

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");

无法获取输入的值

2 个答案: