Подключить внешний Javascript к Flask
Я пытаюсь получить координаты экрана по клику. Я написал очень простой код для того же самого. Я не могу подключить свой внешний файл js к Flask.
Когда я запускаю файл .html, код работает отлично. Когда я подключаю его через Flask, я пробовал включить Javascript в сам HTML-код, и даже это работает. Но когда часть Javascript подключена через файл .js, часть в файле .js не работает. Я не вижу никаких ошибок, поэтому становится трудно отлаживать.
Скрипт Python:
from flask import Flask, render_template, url_for
app = Flask(__name__)
@app.route('/')
@app.route('/button_click')
def button_click():
return render_template('button_click.html')
if __name__ == '__main__':
app.run(debug=True)
HTML-код:
<html>
<head><title> Button Click </title></head>
<body>
<div id = "example">
</div>
<script type = "text/javascript" src = "{{ url_for('static', filename='button_click.js') }}"> </script>
</body>
</html>
Javascript-код:
function printMousePos(event) {
document.body.textContent =
"clientX: " + event.clientX +
" - clientY: " + event.clientY;
}
document.addEventListener("click", printMousePos);
Expected Result:
clientX: 93 - clientY: 113
Actual Result:
No change on screen
тоже работает windows, python3.6, убедитесь, что вы поместили статический файл в нужное место.
<html> <head><title> Нажмите кнопку </title></head> <body> <script type = "text/javascript" src = "{{ url_for('static', filename='button_click.js') }}"> </script> <div id = "example"> </div> </body> </html> Я только что внес небольшое изменение. Я переместил тег сценария над тегом div, и код заработал. Почему так?
Вы можете воспроизвести проблему, чтобы изменить ее обратно
Проверьте консоль разработчика браузера, возможно, вы найдете ошибку. Кстати, при добавлении прослушивателя вы должны убедиться, что отображается вся страница: поместите этот код в onload.
Я не знаю, имеет ли это значение, но менять весь document.body.textContent немного странно, так как тело содержит тег <script ...>. возможно, вам следует поместить скрипт вне тела.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ваш код работает, как и ожидалось, в моей среде (последняя версия Arch Linux + Google Chrome). Проверьте инструмент разработчика браузера и посмотрите, что происходит.