MowgliB MowgliB - 2 months ago 7
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

<tr></tr>
tag.

Here is my JFiddle.

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


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
onclick="someFunction()"
attribute and
object.onclick
as well. All of them give me the same error. Your help to understand what I am doing is greatly appreciated.

Answer

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.

Comments