Я занимаюсь кодированием с использованием файлов Python, Flask и .js, а также HTML и CSS. Моя проблема в том, что у меня есть выпадающее меню и кнопка, которая может скрывать и отображать текст пароля, но при работе во Flask эта сторона не работает, и я считаю, что это как-то связано с javascript. Эта функция отлично работает, когда я запускаю HTML-файл локально, а не через флешку, но я совершенно заблудился относительно того, куда идти дальше?
С точки зрения того, что я уже сделал, нужно убедиться, что моя файловая структура правильная и что эти файлы .js находятся в статической папке (где таблицы стилей CSS извлекаются из совершенно нормально). Все теги сценариев, где я связываю файлы .js, находятся в конце тега body и не находятся внутри тега head.
<script src="../static/js/vendor/jquery.js"></script>
<script src="../static/js/app.js"></script>
<script src="../static/js/vendor/foundation.js"></script>
<script src="../static/js/vendor/what-input.js"></script>
Это файл приложения, который я использую для Flask, и простой код, используемый для его запуска, если это поможет?
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def render_static():
return render_template('splash_page.html')
@app.route("/account")
def account_page():
return render_template('account.html')
if __name__ == '__main__':
app.run(debug = True)
Ниже вы найдете мой HTML-код, используемый в качестве шаблона во Flask, и это до изменений, предложенных ниже -
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="../static/css/app.css" rel="stylesheet" type="text/css">
<link href="../static/css/foundation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Premier League Pro</li>
<li>
<a href="/account">Account</a>
<ul class="menu vertical">
<li><a href="/my account">My Account</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</li>
<li><a href="#">Predictor</a></li>
<li><a href="#">Odds Calculator</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="row">
<div class="columns large-3"></div>
<div class="columns large-6">
<br>
<br>
<form class="show-password">
<label for="username">Your login</label>
<input type="text" value="" placeholder="Enter Username" id="username">
<div class="password-wrapper">
<label for="password">Your password</label>
<input type="password" value="" placeholder="Enter Password" id="password" class="password">
<button class="unmask" type="button" title="Mask/Unmask password to check content">Unmask</button>
</div>
</form>
</div>
<a class="button small" href="#">Sign In</a>
<div class="columns large-3"></div>
</div>
<script src="../static/js/app.js"></script>
<script src="../static/js/vendor/foundation.js"></script>
<script src="../static/js/vendor/what-input.js"></script>
<script src="../static/js/vendor/jquery.js"></script>
</body>
</html>
Если будет полезно упомянуть, что я использую Foundation как CSS, чтобы помочь редактировать и сделать мои веб-страницы красивыми.
При использовании методов, предложенных ниже для изменения тегов скрипта, в браузере появляется ошибка:
jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'static'