trying to call JavaScript in HTML in Flask framework

Question

How to call JavaScript in HTML? I'm trying to set button when user click, it display hint. I never used JavaScript before, I took help from some website.

Flask code(file name: 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)

Inside template folder:

Html code(file name: 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 code(file name: secret):

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

Inside static/css folder

Javascript code(file name: 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";
      }
    });
  }
}

Answer 1

如果您不使用 JQuery，您可以使用 HTML 中的 onclick 函数来实现：onclick="button_hint()"

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

trying to call JavaScript in HTML in Flask framework

Question

1 answers

solution1
0 2020-08-29 09:19:42

trying to call JavaScript in HTML in Flask framework

Question

1 answers

solution1 0 2020-08-29 09:19:42

solution1
0 2020-08-29 09:19:42