如何使按钮仅在loged_in = false时显示

问题描述 投票:0回答:1

我希望这样,如果您已登录,则不会显示登录和注册按钮。

我尝试这样做,但它不起作用


  var loginBtn = document.getElementById("LoginBtn"); // Corrected here
  var registerBtn = document.getElementById("RegisterBtn"); // Corrected here

  if (loggedin == False) {
      loginBtn.style.display = "inline-block"; // Show
      registerBtn.style.display = "inline-block"; // Show
    } else {
      loginBtn.style.visibility = 'hidden'; // Hide
      registerBtn.style.visibility = 'hidden'; // Hide
    }

这是应用程序,为了调试目的将其设置为始终为 true。

@app.route('/')
def index():
    if flask.session.get('username'):
        return flask.render_template('index.html', loggedin=True)
    else:
        return flask.render_template('index.html', loggedin=True)
javascript python html
1个回答
0
投票

您根据用户是否登录来显示/隐藏元素的方法可能存在误解

假设登录和注册按钮的 HTML 元素具有 ID LoginBtn 和 RegisterBtn,以下是调整 JavaScript 代码的方法:

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var loginBtn = document.getElementById("LoginBtn");
    var registerBtn = document.getElementById("RegisterBtn");

    // Assume 'loggedin' is set by Flask template context
    var loggedin = {{ loggedin|tojson|safe }}; // This assumes Flask sets loggedin correctly in the template

    if (loggedin === false) {
        loginBtn.style.display = "inline-block"; // Show
        registerBtn.style.display = "inline-block"; // Show
    } else {
        loginBtn.style.display = "none"; // Hide
        registerBtn.style.display = "none"; // Hide
    }
});

Flask模板调整

确保您的 Flask 模板正确地将登录变量传递给 JavaScript。


from flask import Flask, render_template, session

app = Flask(__name__)
app.secret_key = 'your_secret_key'

@app.route('/')
def index():
    loggedin = False
    if session.get('username'):
        loggedin = True
    return render_template('index.html', loggedin=loggedin)

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

HTML 结构

确保您的 HTML 结构包含 ID 为 LoginBtn 和 RegisterBtn 的元素:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Page</title>
    <!-- Include any necessary CSS and JavaScript -->
    <script src="your_script.js" defer></script>
</head>
<body>
    <!-- Your other HTML content -->
    <button id="LoginBtn">Login</button>
    <button id="RegisterBtn">Register</button>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.