Buttons display different text on click flask-python

Question

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 class="btnClick"  data-section="1">ONE</button>
    <button class="btnClick"  data-section="2">TWO</button>
    <button class="btnClick"  data-section="3">THEE</button>
    <button class="btnClick"  data-section="4">FIVE</button>

    <div class="container-section">
        <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.

Asked By: yoggocup

||

Source

Answer 1

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>

Answered By: Detlef

Buttons display different text on click flask-python

Question:

Answers: