попытка вызвать JavaScript в HTML в фреймворке Flask

#javascript #python #html #flask

#javascript #python #HTML #flask

Вопрос:

Как вызвать JavaScript в HTML? Я пытаюсь установить кнопку, когда пользователь нажимает, она отображает подсказку. Я никогда раньше не использовал JavaScript, я воспользовался помощью с какого-то веб-сайта.

Код Flask (имя файла: Website_using_Flask):

 from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def home():
    return render_template("Journey.html")


@app.route('/quotes/')
def quotes():
    return render_template("Quotes.html")


@app.route('/secret_message/')
def secret():
    return render_template("secret.html")


if __name__ == "__main__":
    app.run(debug=True)

Внутри папки шаблона:

HTML-код (имя файла: layout_2):

 <!DOCTYPE html>
<html>

<head>
    <title>Flask App</title>
    <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
    <script src="{{url_for('static', filename='main_js.js')}}"></script>
</head>

<body>
    <header>
        <div class="container">
            <h1 class="logo">Web App</h1>
            <strong>
                <nav>
                    <ul class="menu">
                        <li><a href="{{url_for('home')}}">Home</a></li>
                        <li><a href="{{url_for('quotes')}}">Quotes</a></li>
                        <li><a href="{{url_for('secret')}}">Secret</a></li>
                    </ul>
                </nav>
            </strong>
    </header>
    <div class="container">
        {%block content%}
        {%endblock%}
    </div>
</body>

</html>

HTML-код (имя файла: секретный):

 {%extends "layout_2.html"%}
{%block content%}
<div class="secret">
    <h1>
        <center><u>Secret Message</u></center>
    </h1>
    <p> Try to decode it amp;#128521; </p>
    <button type="button" class="collapsible">Hint</button>
    <div class="content">
        <p>press ctrl f and find number form digit 0-9 <br></p>
    </div>
    <script>button_hint();</script>
    <P>
        051541451431641621571721571511441234567881234567812345678123678326470547 <br>
        2996473257499999650199625379989999993413269916749953349999914649932724997 <br>
        2994567802992569930199056769909927336781467998299634699818991169966144990 <br>
        2997364561990129985699801329959999012615302799995324993243699019923412993 <br>
        2994567801993569980299356789939923456725634569974326992644399243992369936 <br>
        2994567801992689901239967899029935245745315319931253399436998011992349950 <br>
        2999999345299999388352999991039999991232012479934673289999982640499999415 <br>
    </P>
</div>
{%endblock%}

Внутри папки static / css

Код Javascript (имя файла: main_js):

 function button_hint() {
  var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i  ) {
    coll[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
}

1. попробуйте вызвать свой файл сценария после ваших <body></body> тегов и вызвать метод, как указано в ответе

2. я сделал, но это не сработало, когда я нажимаю на кнопку подсказки, ничего не происходит

Ответ №1:

Если вы не используете jQuery, вы можете сделать это с помощью функции onclick в HTML: onclick=»button_hint()»

 <button type="button" class="collapsible" onclick="button_hint()">Hint</button>

1. onclick это не мешает вам использовать jQuery 🙂

2. Конечно, но, поскольку многие люди не рекомендуют включать Javascript в html, я предпочел упомянуть jQuery 🙂

3. я попробовал это <button type=»button» class=»collapsible» onclick=»button_hint()»>Подсказка</button> и удаленные строки <script>button_hint();</script> but not worked