Buttons display different text on click flask-python-CodePudding

I am trying to code four buttons that each display different text on click (clicking button one shows "message one", clicking button two replaces "message one" with "message two", & so on...).

I am not experienced with flask-python so I do not know how to go about fixing this issue.

I first tried to use this for HTML:

    <button   data-section="1">ONE</button>
    <button   data-section="2">TWO</button>
    <button   data-section="3">THEE</button>
    <button   data-section="4">FIVE</button>

    <div >
        <div data-target="1">
            <p>Message one</p>
        </div>

        <div data-target="2" style="display:none;">
            <p>Message two</p>
        </div>

        <div data-target="3" style="display:none;">
            <p>Message three</p>
        </div>

        <div data-target="4" style="display:none;">
            <p>Message four</p>
        </div>

    </div>

With this JS:

const sections = $('.container-section');
$('.btnClick').on('click', function () {
    $(sections).find('[data-target]').hide();
    $(sections).find('[data-target="'   $(this).data('section')   '"]').show();
});

However, the the javascript was not loading & therefore the buttons were not working. Now I am trying to implement this using a form in the HTML instead:

<form>
        <input type="submit" name="1" value="One">
        <input type="submit" name="2" value="Two">
        <input type="submit" name="3" value="Three">
        <input type="submit" name="4" value="Four">
    </form>

    {% if text %}
    <p id="text">{{ text }}</p>
    {% endif %}

with this python code so far:

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')

@app.route('/index.html')
def index():
    return render_template('index.html')

@app.route('/arena.html')
def arena():

    try:
        value=request.form['submit']
        if value == '1':
            return render_template('arena.html', text="1")


    except:
        try:

            return render_template('arena.html', text=request.form['text'])
        except:

            return render_template('arena.html', text="default")

How might I get the buttons to work? Do I absolutely need to use a form or is it possible with the original button tag? If I do need a form, what needs to go in the python code to have each button click display different text below? Thank you in advance.

CodePudding user response：

If you just want to change the visibility of elements, you don't need a form. It's easy to implement with Javascript and without Flask.

Wait for the page to load before running the code. Register your listeners for click events and toggle visibility.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Index</title>
</head>
<body>
    <button data-target="#msg-1">One</button>
    <button data-target="#msg-2">Two</button>
    <button data-target="#msg-3">Three</button>
    <button data-target="#msg-4">Four</button>

    <div id="msg-1" style="display: None;">Message 1</div>
    <div id="msg-2" style="display: None;">Message 2</div>
    <div id="msg-3" style="display: None;">Message 3</div>
    <div id="msg-4" style="display: None;">Message 4</div>

    <script 
        src="https://code.jquery.com/jquery-3.6.2.js" 
        integrity="sha256-pkn2CUZmheSeyssYw3vMp1 xyub4m e QK4sQskvuo4=" 
        crossorigin="anonymous"></script>
    <script>
        $(function() {
            $('button[data-target]').click(function() {
                $('[id^="msg-"]').hide();
                $($(this).data('target')).show();
            });
        });
    </script>
</body>
</html>