title: Javascript not running with Flask backend
body: <p>I have been struggling with this problem for so long. When I run the <a href="https://codepen.io/octopirate/pen/abOjWQp" rel="nofollow noreferrer">html file</a> by itself, the javascript runs fine and my code executes exactly as I want it to. However, when running with my Flask backend, it does not do so. My code is structured almost exactly like <a href="https://github.com/hackersandslackers/flask-wtform-tutorial" rel="nofollow noreferrer">this repo</a>.</p>
  
  <p>Also note that Jinja could be causing this problem, but once again Jinja syntax still works when the HTML file is run by itself. Please help. This is the html file:</p>
  
  <pre><code>
      {% extends 'layout.html' %}
  
      {% block styles %}
      &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="../static/request.css"&gt;
      {% endblock %}
  
      {% block content %}
      &lt;body&gt;
  
      &lt;!-- Overlay req --&gt;
      &lt;div id="reqoverlay" class="overlay"&gt;
        &lt;div class="overlay-content"&gt;
          &lt;div class="nerb"&gt;
            &lt;!-- &lt;a href="javascript:void(0)" class="closebtn" id="reqclosebtn" onclick="javascript:closereqNav()"&gt;&amp;times;&lt;/a&gt; --&gt;
            &lt;a href="javascript:void(0)" class="closebtn" id="reqclosebtn"&gt;&amp;times;&lt;/a&gt;
            &lt;div class="container"&gt;
              &lt;form id="contact" action="/" method="POST"&gt;
                &lt;h3&gt;Request help in your neighborhood&lt;/h3&gt;
                &lt;div class="form-field"&gt;{{ form.name.label }} {{ form.name(size=20) }}
                  {% if form.name.errors %}
                    &lt;ul class="errors"&gt;
                      {% for error in form.name.errors %}
                        &lt;li&gt;{{ error }}&lt;/li&gt;
                      {% endfor %}
                    &lt;/ul&gt;
                  {% endif %}
                &lt;/div&gt;
                &lt;div onchange="this.value=addSpaces(this.value)" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" class="form-field"&gt;{{ form.email.label }} {{ form.email }}
                  {% if form.email.errors %}
                    &lt;ul class="errors"&gt;
                      {% for error in form.email.errors %}
                        &lt;li&gt;{{ error }}&lt;/li&gt;
                      {% endfor %}
                    &lt;/ul&gt;
                  {% endif %}
                &lt;/div&gt;
                &lt;div class="form-field"&gt;{{ form.body.label }} {{ form.body }}
                  {% if form.body.errors %}
                    &lt;ul class="errors"&gt;
                      {% for error in form.body.errors %}
                        &lt;li&gt;{{ error }}&lt;/li&gt;
                      {% endfor %}
                    &lt;/ul&gt;
                  {% endif %}
                &lt;/div&gt;
                {{ form.submit }}
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Overlay del --&gt;
      &lt;div id="deloverlay" class="overlay"&gt;
        &lt;div class="overlay-content"&gt;
          &lt;div class="nerb"&gt;
            &lt;!-- &lt;a href="javascript:void(0)" class="closebtn" id="delclosebtn" onclick="javascript:closedelNav()"&gt;&amp;times;&lt;/a&gt; --&gt;
            &lt;a href="javascript:void(0)" class="closebtn" id="delclosebtn"&gt;&amp;times;&lt;/a&gt;
            &lt;div class="container"&gt;
              &lt;form id="contact" action="/" method="post"&gt;
                &lt;h3&gt;Deliver and help in your neighborhood&lt;/h3&gt;
                &lt;fieldset&gt;
                  &lt;input placeholder="Your name" type="text" tabindex="1" required autofocus&gt;
                &lt;/fieldset&gt;
                &lt;fieldset&gt;
                  &lt;input onkeypress="return isNumberKey(event);this.value=addSpaces(this.value)" placeholder="Your Phone Number" type="tel" tabindex="2" required&gt;
                &lt;/fieldset&gt;
                &lt;fieldset&gt;
                  &lt;input placeholder="Your Address" type="text" tabindex="3" required&gt;
                &lt;/fieldset&gt;
                &lt;fieldset&gt;
                  &lt;button name="submit" type="submit" id="contact-submit" data-submit="...Sending"&gt;Submit&lt;/button&gt;
                &lt;/fieldset&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;!-- Navbar --&gt;
      &lt;div class="w3-top"&gt;
        &lt;div class="w3-bar w3-red w3-card w3-left-align w3-large"&gt;
          &lt;a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button w3-padding-large w3-white"&gt;Home&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"&gt;Link 1&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"&gt;Link 2&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"&gt;Link 3&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"&gt;Link 4&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;!-- Navbar on small screens --&gt;
        &lt;div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large"&gt;
          &lt;a href=# class="w3-bar-item w3-button w3-padding-large"&gt;Link 1&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button w3-padding-large"&gt;Link 2&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button w3-padding-large"&gt;Link 3&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button w3-padding-large"&gt;Link 4&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Header --&gt;
      &lt;header class="w3-container w3-red w3-center" style="padding:128px 16px"&gt;
        &lt;h1 class="w3-margin w3-jumbo"&gt;stuff&lt;/h1&gt;
        &lt;p class="w3-xlarge"&gt;things&lt;/p&gt;
        &lt;!-- &lt;button onclick="javascript:openreqNav()" id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top"&gt;Request Help&lt;/button&gt; --&gt;
        &lt;!-- &lt;button onclick="javascript:opendelNav()" id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top"&gt;Give Help&lt;/button&gt; --&gt;
        &lt;button id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top"&gt;Request Help&lt;/button&gt;
        &lt;button id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top"&gt;Give Help&lt;/button&gt;
      &lt;/header&gt;
  
      &lt;!-- First Grid --&gt;
      &lt;div class="w3-row-padding w3-padding-64 w3-container"&gt;
        &lt;div class="w3-content"&gt;
          &lt;div class="w3-twothird"&gt;
            &lt;h1&gt;etc&lt;/h1&gt;
            &lt;h5 class="w3-padding-32"&gt;etc&lt;/h5&gt;
  
            &lt;p class="w3-text-grey"&gt;etc&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="w3-third w3-center"&gt;
            &lt;i class="fa w3-padding-64 w3-text-red"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      {% endblock %}
  
      {% block javascript %}
      &lt;script&gt;
        // Used to toggle the menu on small screens when clicking on the menu button
        function myFunction() {
          var x = document.getElementById("navDemo");
          if (x.className.indexOf("w3-show") == -1) {
            x.className += " w3-show";
          } else {
            x.className = x.className.replace(" w3-show", "");
          }
        }
  
        console.log("qnwjfiengefvjnfji")
  
        document.getElementById("reqclosebtn").addEventListener("click", closereqNav, false);
        document.getElementById("delclosebtn").addEventListener("click", closedelNav, false);
        document.getElementById("reqopenbtn").addEventListener("click", openreqNav, false);
        document.getElementById("delopenbtn").addEventListener("click", opendelNav, false);
  
  
        function openreqNav() {
          document.getElementById("reqoverlay").style.height = "100%";
        }
  
        function opendelNav() {
          document.getElementById("deloverlay").style.height = "100%";
        }
  
        function closereqNav() {
          document.getElementById("reqoverlay").style.height = "0%";
        }
  
        function closedelNav() {
          document.getElementById("deloverlay").style.height = "0%";
        }
  
        function addSpaces(initial){
                initial = Number(initial)
                result = initial.toLocaleString()
                return result;
        }
  
        function isNumberKey(evt){
            var charCode = (evt.which) ? evt.which : evt.keyCode
            if (charCode &gt; 31 &amp;&amp; (charCode &lt; 48 || charCode &gt; 57))
                return false;
            return true;
        }
      &lt;/script&gt;
      {% endblock %}
  
      &lt;/body&gt;
  
      &lt;/html&gt;
  
  </code></pre>
  
  <p><strong>layout.html:</strong></p>
  
  <pre><code>
      &lt;!DOCTYPE html&gt;
  
      &lt;html lang="en"&gt;
  
        &lt;head&gt;
          &lt;!-- {% include 'meta.html' %} --&gt;
          {% block styles %}{% endblock %}
          &lt;script src="https://kit.fontawesome.com/e3deaeba31.js" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Poppins:200,300,500" rel="stylesheet"&gt;
        &lt;/head&gt;
  
        &lt;body class="{{template}}"&gt;
          {% block content %}{% endblock %}
        &lt;/body&gt;
  
      &lt;/html&gt;
  
  </code></pre>
  
  <p><strong>meta.html:</strong></p>
  
  <pre><code>
      {% block meta %}
        &lt;meta charset="utf-8" /&gt;
        &lt;title&gt;{{title}}&lt;/title&gt;
        &lt;meta name="HandheldFriendly" content="True" /&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /&gt;
        &lt;meta name="theme-color" content="#5eb9d7" /&gt;
        &lt;link rel="shortcut icon" href="{{ url_for('static', filename='dist/img/favicon.png') }}" type="image/x-icon"/&gt;
      {% endblock %}
  
  </code></pre>
  
  <p>I will post any other files requested. I have never worked with JS or front-end development before. </p>