我一直在努力解决这个问题。当我自己运行html file时，javascript运行正常，我的代码完全按照我想要的方式执行。但是，当与Flask后端一起运行时，它不会这样做。我的代码的结构几乎与this repo类似。
还请注意，Jinja可能会导致此问题，但是当HTML文件本身运行时，Jinja语法仍然有效。请帮忙。这是html文件：
{% extends 'layout.html' %}
{% block styles %}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../static/request.css">
{% endblock %}
{% block content %}
<body>
<!-- Overlay req -->
<div id="reqoverlay" class="overlay">
<div class="overlay-content">
<div class="nerb">
<!-- <a href="javascript:void(0)" class="closebtn" id="reqclosebtn" onclick="javascript:closereqNav()">×</a> -->
<a href="javascript:void(0)" class="closebtn" id="reqclosebtn">×</a>
<div class="container">
<form id="contact" action="/" method="POST">
<h3>Request help in your neighborhood</h3>
<div class="form-field">{{ form.name.label }} {{ form.name(size=20) }}
{% if form.name.errors %}
<ul class="errors">
{% for error in form.name.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div onchange="this.value=addSpaces(this.value)" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" class="form-field">{{ form.email.label }} {{ form.email }}
{% if form.email.errors %}
<ul class="errors">
{% for error in form.email.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-field">{{ form.body.label }} {{ form.body }}
{% if form.body.errors %}
<ul class="errors">
{% for error in form.body.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{{ form.submit }}
</form>
</div>
</div>
</div>
</div>
<!-- Overlay del -->
<div id="deloverlay" class="overlay">
<div class="overlay-content">
<div class="nerb">
<!-- <a href="javascript:void(0)" class="closebtn" id="delclosebtn" onclick="javascript:closedelNav()">×</a> -->
<a href="javascript:void(0)" class="closebtn" id="delclosebtn">×</a>
<div class="container">
<form id="contact" action="/" method="post">
<h3>Deliver and help in your neighborhood</h3>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input onkeypress="return isNumberKey(event);this.value=addSpaces(this.value)" placeholder="Your Phone Number" type="tel" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Address" type="text" tabindex="3" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-red w3-card w3-left-align w3-large">
<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"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
<a href=# class="w3-bar-item w3-button w3-padding-large">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
</div>
</div>
<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
<h1 class="w3-margin w3-jumbo">stuff</h1>
<p class="w3-xlarge">things</p>
<!-- <button onclick="javascript:openreqNav()" id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button> -->
<!-- <button onclick="javascript:opendelNav()" id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button> -->
<button id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button>
<button id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button>
</header>
<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>etc</h1>
<h5 class="w3-padding-32">etc</h5>
<p class="w3-text-grey">etc</p>
</div>
<div class="w3-third w3-center">
<i class="fa w3-padding-64 w3-text-red"></i>
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
<script>
// 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 > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
{% endblock %}
</body>
</html>
layout.html：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- {% include 'meta.html' %} -->
{% block styles %}{% endblock %}
<script src="https://kit.fontawesome.com/e3deaeba31.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,500" rel="stylesheet">
</head>
<body class="{{template}}">
{% block content %}{% endblock %}
</body>
</html>
meta.html：
{% block meta %}
<meta charset="utf-8" />
<title>{{title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#5eb9d7" />
<link rel="shortcut icon" href="{{ url_for('static', filename='dist/img/favicon.png') }}" type="image/x-icon"/>
{% endblock %}
我将发布其他要求的文件。我以前从未使用过JS或前端开发。
似乎您正在扩展layout.html，现在当您扩展它时，有两个块：-1）{% block styles %}2）{% block content %}
现在在实际的HTML中，您将layout.html扩展了，您同时使用了这两个标签，甚至关闭了它们，然后启动了新标签{% block javascript %}，由于关闭了标签，layout.html并不认为这是新标签在其中声明的。
尝试一下：-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- {% include 'meta.html' %} -->
{% block styles %}{% endblock %}
<script src="https://kit.fontawesome.com/e3deaeba31.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,500" rel="stylesheet">
</head>
<body class="{{template}}">
{% block javascript %}{% endblock javascript %}
{% block content %}{% endblock content %}
</body>
</html>
Htmlfile.html（其中脚本未运行，位于layout.html上方）
{% extends 'layout.html' %}
{% block styles %}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../static/request.css">
{% endblock %}
{% block javascript %}
<script>
// 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 > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
{% endblock javascript %}
{% block content %}
<!-- Overlay req -->
<div id="reqoverlay" class="overlay">
<div class="overlay-content">
<div class="nerb">
<!-- <a href="javascript:void(0)" class="closebtn" id="reqclosebtn" onclick="javascript:closereqNav()">×</a> -->
<a href="javascript:void(0)" class="closebtn" id="reqclosebtn">×</a>
<div class="container">
<form id="contact" action="/" method="POST">
<h3>Request help in your neighborhood</h3>
<div class="form-field">{{ form.name.label }} {{ form.name(size=20) }}
{% if form.name.errors %}
<ul class="errors">
{% for error in form.name.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div onchange="this.value=addSpaces(this.value)" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" class="form-field">{{ form.email.label }} {{ form.email }}
{% if form.email.errors %}
<ul class="errors">
{% for error in form.email.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-field">{{ form.body.label }} {{ form.body }}
{% if form.body.errors %}
<ul class="errors">
{% for error in form.body.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{{ form.submit }}
</form>
</div>
</div>
</div>
</div>
<!-- Overlay del -->
<div id="deloverlay" class="overlay">
<div class="overlay-content">
<div class="nerb">
<!-- <a href="javascript:void(0)" class="closebtn" id="delclosebtn" onclick="javascript:closedelNav()">×</a> -->
<a href="javascript:void(0)" class="closebtn" id="delclosebtn">×</a>
<div class="container">
<form id="contact" action="/" method="post">
<h3>Deliver and help in your neighborhood</h3>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input onkeypress="return isNumberKey(event);this.value=addSpaces(this.value)" placeholder="Your Phone Number" type="tel" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Address" type="text" tabindex="3" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-red w3-card w3-left-align w3-large">
<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"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
<a href=# class="w3-bar-item w3-button w3-padding-large">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
</div>
</div>
<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
<h1 class="w3-margin w3-jumbo">stuff</h1>
<p class="w3-xlarge">things</p>
<!-- <button onclick="javascript:openreqNav()" id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button> -->
<!-- <button onclick="javascript:opendelNav()" id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button> -->
<button id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button>
<button id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button>
</header>
<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>etc</h1>
<h5 class="w3-padding-32">etc</h5>
<p class="w3-text-grey">etc</p>
</div>
<div class="w3-third w3-center">
<i class="fa w3-padding-64 w3-text-red"></i>
</div>
</div>
</div>
{% endblock content %}
并且也不要在扩展任何模板后放置body和html，因为扩展模板中已提到。希望此方法有效！