尝试在Flask框架中调用HTML中的JavaScript_Javascript_Python_Html_Flask

尝试在Flask框架中调用HTML中的JavaScript

javascript python html flask

尝试在Flask框架中调用HTML中的JavaScript,javascript,python,html,flask,Javascript,Python,Html,Flask,如何在HTML中调用JavaScript？我试图设置按钮时，用户点击，它显示提示。我以前从未使用过JavaScript，我从一些网站上获得了帮助烧瓶代码（文件名：网站使用烧瓶）：模板文件夹内部： Html代码（文件名：layout_2）：烧瓶应用程序网络应用 {%block content%} {%endblock%} Html代码（文件名：secret）： {%extensed“layout_2.html”%} {%block content%} 密信试着解码它&#

如何在HTML中调用JavaScript？我试图设置按钮时，用户点击，它显示提示。我以前从未使用过JavaScript，我从一些网站上获得了帮助

烧瓶代码（文件名：网站使用烧瓶）：

模板文件夹内部：

Html代码（文件名：layout_2）：


烧瓶应用程序
网络应用







{%block content%}
{%endblock%}

Html代码（文件名：secret）：

{%extensed“layout_2.html”%}
{%block content%}
密信
试着解码它😉
暗示
按ctrl+f并从数字0-9中查找数字

按钮提示（）；

051541451431641621571721571144123456788812345678812345678123678326470547

299647325749999996501996253799989999934132699916749953349999914649932724997

299456780299256993019905656799099927236678146799829963469818991169966144990

2997364561990129985699801329959999012615302799995324932434699019923412993

29945678019935699802993567899399234567256345699743269926492644394399243992369936

2994567801992689901239967899029935245745315319931253394369980111992349950

29999934529999993883529999103999999123201247999346732899982640499999415


{%endblock%}

静态/css文件夹内部

Javascript代码（文件名：main_js）：

功能按钮\u提示（）{
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

如果您没有使用JQuery，可以使用HTML中的onclick功能： onclick=“按钮提示（）

提示

onclick

并不妨碍您使用jQuery:）当然，但很多人不会建议在html中包含Javascript，我更喜欢提到jQuery:）我尝试了这个提示并删除了行按钮提示（）；但是不起作用请在

标记后调用脚本文件，并按回答所说的那样调用该方法，但它不起作用，当我单击“提示”按钮时，什么也没有发生

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)

<!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>

{%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%}

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";
      }
    });
  }
}

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