title: How can I render a JS template from a rendered HTML template?
body: <p>If I'd like to generate JavaScript code, and not just HTML, through Jinja2, am I stuck with keeping the JS code inline, or is there a way for me to reference the script?</p>
  
  <p>Concretely:</p>
  
  <p><strong>app.py</strong></p>
  
  <pre><code>from flask import Flask, render_template
  app = Flask(__name__)
  app.config['DEBUG'] = True
  
  @app.route('/')
  def index():
      return render_template('index.html', name='Sebastian', color='pink')
  
  if __name__ == '__main__':
      app.run()
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta content="utf-8" http-equiv="encoding"&gt;
          &lt;script&gt;
              function myEnterFunction() {
                  element = document.getElementById("demo");
                  element.style.backgroundColor = "{{ color }}";
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;Hello {{ name }}&lt;/p&gt;
          &lt;div onmouseenter="myEnterFunction()"&gt;
              &lt;p&gt;onmouseenter:
                  &lt;span id="demo"&gt;Mouse over me!&lt;/span&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works fine if the JavaScript code is inlined, but what if we'd like to remain tidy and reference a separate file?</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta content="utf-8" http-equiv="encoding"&gt;
      &lt;script src="code.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>?</p>
  
  <p>Possibly, this can be done by replacing <code>src="code.js"</code> with</p>
  
  <pre><code>{% render_template('code.js', color=color) %}
  </code></pre>
  
  <p>Can you see how to render a JS template while you're rendering an HTML template?</p>