javascript - Javascript 未与 Flask 后端一起运行
问题描述
我一直在为这个问题苦苦挣扎这么久。当我自己运行html 文件时,javascript 运行良好,并且我的代码完全按照我的意愿执行。但是,当使用我的 Flask 后端运行时,它不会这样做。我的代码的结构几乎与此 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>
布局.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>
元.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
在扩展任何模板之后放置扩展模板中预先提到的任何模板。希望这有效!
推荐阅读
- php - 我必须如何在 Elasticsearch 中保存类别过滤器?
- wordpress - 将自定义字段添加到自定义 Woocommerce 电子邮件
- git - Git红色和绿色状态图标在文件夹中消失
- python - 在 JupyterLab 上查找输出历史记录
- visual-studio-code - VSCode - 对齐所有字符美化设置
- azure - 这是否可以根据 appsetting.json 中的值在 Azure WebJob 的初始加载期间设置“QueueTrigger”值?
- javascript - 错误:错误:无法从`screens/index.js 解析模块`./contants/icons`
- flutter - Flutter Pinput 溢出
- javascript - 如何使用柏树选择带有标题的svg?
- android - 只接受允许的字符 EditText。使用正则表达式和 inputfilter kotlin