javascript - 试图在 Flask 框架中调用 HTML 中的 JavaScript

问题描述

如何在 HTML 中调用 JavaScript？我正在尝试在用户单击时设置按钮，它会显示提示。我以前从未使用过 JavaScript，我从某个网站获得了帮助。

烧瓶代码（文件名：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 &#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";
      }
    });
  }
}

标签： javascriptpythonhtmlflask

javascript - 试图在 Flask 框架中调用 HTML 中的 JavaScript

问题描述

解决方案

推荐阅读