MowgliB MowgliB - 4 months ago 14
Javascript Question

Uncaught TypeError: undefined is not a function - not JQuery

I feel terrible for submitting another Uncaught TypeError: undefined is not a function question. But after reading about 20 different answers to these types of questions, either I am missing the point, or the problem was different in those cases.

I have a form with two radio buttons. When one is clicked I want it to change the innerHTML of a


Here is my JFiddle.


<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" />
<tr id="headerInput"></tr>

The 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>';

I have tried a few different versions of the same thing, like creating named functions, using the
attribute and
as well. All of them give me the same error. Your help to understand what I am doing is greatly appreciated.


window.getElementById() isn't defined normally in a browser.

Looking up property 'getElementById' on window returns undefined. You're then attempting to invoke undefined, hence Uncaught TypeError: undefined is not a function.

You probably mean to use document there instead.