title: what could cause a js function that has been defined to be unable to be called
body: <p>I have some JS code which adds elements to a page when a button has been clicked but for some reason when the button is pressed it tells me that the function I am trying to call returns error</p>
  <blockquote>
  <p>Uncaught TypeError: addstep is not a function</p>
  <p>buttons.onclick @ add.js:124</p>
  </blockquote>
  <pre><code>function addstep(x)
  {
      if(x === undefined)
      {
          x = 1;
      }
  
      // Define Variables
      var steps = document.getElementById(&quot;steps&quot;);
      var addstep = document.getElementById('addstep');
      var newstep = document.createElement(&quot;textarea&quot;);
      newstep.name = &quot;step&quot; + x;
      newstep.idName   = &quot;txtr&quot;;
      newstep.className = &quot;txtr&quot;;
  
      var step = &quot;Step &quot; + x + &quot;:&amp;nbsp;&quot;;
  
      steps.innerHTML = step;
      steps.appendChild(newstep);
  
      x++;
  
      var buttons = document.createElement(&quot;button&quot;);
      var text    = document.createTextNode(&quot;Add Step&quot;);
      buttons.appendChild(text);
      buttons.onclick = function(){ addstep(x);};
      addstep.appendChild(buttons);    
  }
  </code></pre>
  <p>I can't seem to find the problem in my code I load this code on runtime which works but not when the button is pressed??</p>