title: html javascript - onclick() reference error: function not defined
body: <p>Given my html file, the console gives an error code: </p>
  
  <blockquote>
    <p>Reference Error: loadData not defined.</p>
  </blockquote>
  
  <p>Based from other answers I've rechecked mine where, </p>
  
  <ol>
  <li>My function is declared just before the <code>&lt;/body&gt;</code>, </li>
  <li>I included the javascript library at the <code>&lt;head&gt;&lt;/head&gt;</code> ;</li>
  <li>and even changed my <code>&lt;input type= submit</code> to <code>&lt;input type= button</code></li>
  <li>and if it helped, I tried deleting my form tags where it is enclosed <em>(but this is for another question regarding query strings).</em></li>
  </ol>
  
  <p>Here's how it would look like now:</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
     {%for document in documents %}
        &lt;li&gt; {{document.filename}}
        &lt;input type="button" id="{{ document.id }}" onclick="loadData(this.id)" name = "load-data" value="Add to Layer"/&gt;
        &lt;/li&gt;
      {%endfor%}
  
  &lt;script type ="text/javascript"&gt;
  function loadData(documentId){
     $.ajax({
     url:"/load",
     data: {'documentId': documentId},
     type: 'GET',
     success: function(){
        window.location.href = "http://127.0.0.1:8000/url/locations";
     }
  });
  }
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I can't seem to find an explanation why the function won't fire.</p>