title: How to handle JS script with Django template language?
body: <p>I'm trying to use <code>Django</code> template language to manipulate <code>JS</code> scripts, but when I try appears the following error</p>
  <p><a href="https://i.stack.imgur.com/0vKIj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0vKIj.png" alt="enter image description here" /></a></p>
  <p>I checked the error in case there is a miss typed code, but I couldn't detect it.</p>
  <p>How is the best way to handle multiple <code>JS</code> script with multiple <code>HTML</code> files in <code>Django</code> template language?</p>
  <p><strong><code>Infraestructura.html</code></strong></p>
  <pre><code>{% extends &quot;Portafolio/layout.html&quot; %}
  
  
  {% block scripts %}
  &lt;script src = &quot;{% static 'Portafolio/scriptinfra.js' %}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;    
  {% endblock %}
  
  
  
  {% block content %}
  
  &lt;form class=&quot;form mt-5&quot; id=&quot;infra&quot;&gt;
      &lt;h1&gt;Factibilidad Técnica y Operativa&lt;/h1&gt;
      &lt;h2&gt;Análisis de Infraestructura&lt;/h2&gt;
  
      &lt;main class=&quot;container&quot;&gt;
        &lt;section class=&quot;row&quot;&gt;
  
          &lt;div class=&quot;col-lg-4 mb-2&quot;&gt;
            &lt;input name='infs' class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Infraestructura&quot;&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;col-lg-4 mb-2&quot;&gt;
            &lt;input name='time' class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Tiempo&quot;&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;col-lg-4 mb-2&quot;&gt;
            &lt;input name='cost' class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Costo Mensual&quot;&gt;
          &lt;/div&gt;
          
        &lt;/section&gt;
      &lt;/main&gt;
  
      &lt;nav class=&quot;btn-group&quot;&gt;
        &lt;button id='add' class='btn btn-success' type='button'&gt;
          &lt;i class=&quot;fa fa-plus-square&quot;&gt;&lt;/i&gt; Añadir
        &lt;/button&gt;
        &lt;button id='rem' class='btn btn-danger' type='button'&gt;
          &lt;i class=&quot;fa fa-minus-square&quot;&gt;&lt;/i&gt; Eliminar
        &lt;/button&gt;     
      &lt;/nav&gt;
    &lt;/form&gt;
    
    &lt;form class=&quot;form mt-3&quot;&gt;
      &lt;div class=&quot;d-grid gap-2 mt-3&quot;&gt;
        &lt;a class=&quot;btn btn-lg btn-primary&quot; href=&quot;tecnicoequipo.html&quot;&gt;Siguiente&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;d-grid gap-2 mt-3&quot;&gt;
        &lt;a class=&quot;btn btn-lg btn-primary&quot; href=&quot;financierobeneficio.html&quot;&gt;Atrás&lt;/a&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  {% endblock %}
  </code></pre>
  <p><strong><code>layout.html</code></strong></p>
  <pre><code>{% load static %}
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;es&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href= &quot;{% static 'Portafolio/style.css' %}&quot;&gt;
      
      {% block scripts %} &lt;script src=&quot;{% static 'Portafolio/scriptinfra.js' %}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; {% endblock}
  
  
  
      &lt;title&gt;{% block title %} {% endblock %}&lt;/title&gt; 
  &lt;/head&gt;
  &lt;body&gt;
      {% block content %}
      
      {% endblock %}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>