JavaScript getElementbyId只能运行一次，但不能两次？

Question

我试图获得一个表格单元格，当单击它时它可以变成文本框，以便我们可以填充它，然后将文本添加到该单元格中。

有我的JavaScript函数：

$(".cellConsigne").click(function () {
    var numId = this.id.substring(24);
    document.getElementById("MainContent_txtConsigne" + numId).style.display = "block";
    document.getElementById("MainContent_txtConsigne" + numId).focus();
});

$(".txtTab").focusout(function () {
    var numId = this.id.substring(23);
    document.getElementById("MainContent_cellConsigne" + numId).textContent = this.value;
    this.style.display = "none";
});

以及我在C＃代码后面的单元格和文本框的声明：

TableCell cell17 = new TableCell();
cell17.ID = "cellConsigne" + i.ToString();
cell17.CssClass = "cellConsigne";

TextBox txtConsignes = new TextBox();
txtConsignes.ID = "txtConsigne" + i.ToString();
txtConsignes.CssClass = "txtTab";
txtConsignes.BackColor = row.BackColor;

cell17.Controls.Add(txtConsignes);

因此，问题在于，第一次单击时，此功能运行良好，显示了文本框并获得了焦点。 我将文本放入其中，然后将文本框和文本移至单元​​格。 但是，当我第二次单击该单元格时，在document.getElementById("MainContent_cellConsigne" + numId)上收到“引用空错误”。

问题是否可能来自CSS类或样式的修改？ 我真的不知道

Answer 1

我发现了问题！

当我这样做

document.getElementById("MainContent_cellConsigne" + numId).textContent = this.value;

它从其中的控件清空单元格，然后将文本添加到单元格中。 因此，文本框不再位于该单元格中。

我只是在该单元格中添加了一个标签，然后将文本框中的文本添加到了标签中，这不再清空该单元格。