title: Uncaught TypeError: undefined is not a function - not JQuery
body: <p>I feel terrible for submitting another <strong>Uncaught TypeError: undefined is not a function</strong> 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.</p>
  
  <p>I have a form with two radio buttons. When one is clicked I want it to change the innerHTML of a <code>&lt;tr&gt;&lt;/tr&gt;</code> tag.</p>
  
  <p>Here is my <a href="http://jsfiddle.net/MowgliB/van5S/5/" rel="nofollow">JFiddle</a>.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;form name="myForm" autocomplete="off" action="index.php" method="post" enctype="multipart/form-data"&gt;
  &lt;label for="mode"&gt;Text&lt;/label&gt;
  &lt;input type="radio" name="mode" value="text" id="setText" /&gt;
  &lt;label for="mode"&gt;Image&lt;/label&gt;
  &lt;input type="radio" name="mode" value="img" id="setImg" /&gt;
  &lt;table&gt;
  &lt;tr id="headerInput"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The Javascript:</p>
  
  <pre><code>document.getElementById("setText").addEventListener("click", function () {
  window.getElementById("headerInput").innerHTML = '&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="title" value="Hello" /&gt;&lt;/td&gt;';
  });
  document.getElementById("setImg").addEventListener("click", function () {
  window.getElementById("headerInput").innerHTML = '&lt;td&gt;Banner&lt;/td&gt;&lt;td&gt;&lt;input type="file" name="banner" /&gt;&lt;/td&gt;';
  });
  </code></pre>
  
  <p>I have tried a few different versions of the same thing, like creating named functions, using the <code>onclick="someFunction()"</code> attribute and <code>object.onclick</code> as well. All of them give me the same error. Your help to understand what I am doing is greatly appreciated.</p>