未捕獲的TypeError：undefined不是函數-不是JQuery

Question

我提交另一個Uncaught TypeError感到很糟糕：undefined不是函數問題。 但是，在閱讀了關於這些類型問題的大約20種不同答案之后，我還是沒聽清重點，或者在這些情況下問題有所不同。

我有一個帶有兩個單選按鈕的表單。 當我單擊它時，我希望它更改<tr></tr>標記的innerHTML。

這是我的JFiddle 。

HTML：

<form name="myForm" autocomplete="off" action="index.php" method="post" enctype="multipart/form-data">
<label for="mode">Text</label>
<input type="radio" name="mode" value="text" id="setText" />
<label for="mode">Image</label>
<input type="radio" name="mode" value="img" id="setImg" />
<table>
<tr id="headerInput"></tr>
</table>
</form>

Javascript：

document.getElementById("setText").addEventListener("click", function () {
window.getElementById("headerInput").innerHTML = '<td>Title</td><td><input type="text" name="title" value="Hello" /></td>';
});
document.getElementById("setImg").addEventListener("click", function () {
window.getElementById("headerInput").innerHTML = '<td>Banner</td><td><input type="file" name="banner" /></td>';
});

我已經嘗試了幾種不同版本的同一件事，如創建命名的功能，使用onclick="someFunction()"屬性， object.onclick為好。 他們都給了我同樣的錯誤。 非常感謝您對我的理解。

Answer 1

在瀏覽器中通常未定義window.getElementById() 。

在window上查找屬性'getElementById'返回undefined 。 然后，您嘗試調用undefined ，因此Uncaught TypeError：undefined不是一個function 。

您可能打算在那兒使用document 。

Answer 2

您應該引用document.getElementById（）而不是window.getElementById（）。 另外，更改innerHTML很好，但是，對於任何操作，我們都應參考tr內部的td。 這是最佳做法。

document.getElementById("headerInput").innerHTML

工作提琴： http : //jsfiddle.net/7fpBg/