title: Calling an external Javascript function in html using flask, showing function not defined
body: <p>I am using flask to {% extends "base.html" %} and insert {% block js_file %}, then I call functions defined in .js file but receive <strong>uncaught referenceerror is not defined.</strong>
  I have a <strong>base.html</strong> containing all the basic elements in all pages. It looks like</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;
              {% block title %}{% endblock %}
          &lt;/title&gt;
          &lt;!--css file code--&gt;
          {% block cssfile %}{% endblock %}
          &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='header.css') }}"&gt;
      &lt;/head&gt;
      &lt;body&gt; 
          ...
           {% block content %}{% endblock %}
           ...
           {% block js_files %}{% endblock %}
      &lt;/body&gt;
      ....
  </code></pre>
  
  <p>then in a specific page called <strong>mark.html</strong>, I extend and insert elements first and want to test a function in a separate functions.js file:</p>
  
  <pre><code>{% extends "base.html" %}
  {% block cssfile %}
      &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='mark.css') }}"&gt;
  {% endblock %}
  
  {% block title %}
      Mark
  {% endblock %}
  
  {% block js_files %}
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"&gt;
      &lt;script src="{{ url_for('static', filename='functions.js') }}"&gt;&lt;/script&gt;
  {% endblock %}
  
  {% block content %}
      ....
      &lt;script&gt;warn();&lt;/script&gt;
      ....
  {% endblock content %}
  </code></pre>
  
  <p><strong>functions.js</strong> has just a testing function:</p>
  
  <pre><code>function warn(){
      alert('fired');
  };
  </code></pre>
  
  <p>In the end, in Chrome Dev Tools, the entended page looks like</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;
              Mark
          &lt;/title&gt;
          &lt;!--css file code--&gt;
          &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='mark.css') }}"&gt;
          &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='header.css') }}"&gt;
      &lt;/head&gt;
      &lt;body&gt; 
          ...
           &lt;script&gt;warn();&lt;/script&gt;
           ...
           &lt;script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"&gt;
          &lt;/script&gt;
          &lt;script src="/static/functions.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      ....
  </code></pre>
  
  <p>The structure looks fine to me but it's uncaught referenceerror is not defined. I am new to web div so this question may be dumb but I appreciate any help!</p>