How to access a specific html in python Flask?

Question

I am trying to make an RPG character-sheet using flask. In this project I have two buttons ( level+ and level- ) that add or decrease the level of the character when pressed on.

So I have my html file:

<div class="level">
  <button type="button" name="level-">-</button>
  <p>{{ level }}</p>
  <button type="button" name="level+">+</button>
</div>

and my flask file:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['POST', 'GET'])
def index():
    level = 0
    
    return render_template('index.html', level=level)

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

How do I access the buttons such that I can increment or decrement the level variable in the python file?

Does this answer your question? Flask button passing variable back to python — Patrick Yoder
– Patrick Yoder, Commented Mar 29, 2022 at 15:43

Jaymit · Accepted Answer · 2022-03-29 12:17:07Z

1

I suggest doing this with javascript instead since it's less resource-intensive than sending a request to the backend and passing the new level to the template.

<div class="level">
    <button type="button" name="level-" onclick="changeLevel(-1)">-</button>
    <p id="level_number">{{ level }}</p>
    <button type="button" name="level+" onclick="changeLevel(1)">+</button>
</div>
    
<script>
    function changeLevel(change) {
      var x = document.getElementById("level_number");
        if (parseInt(x.innerHTML) + change >=0){
            x.innerHTML =  parseInt(x.innerHTML) + change;
        }
    }
</script>

If you need the level in your backend, then you could use AJAX or use a hidden input in a form and read the value in the backend using request.form["level_number"]

<form class="level">
    <button type="submit" name="level-" onclick="changeLevel(-1)">-</button>
    <p id="level_number">2</p>
    <input type="hidden" name="level_number" id="hidden_level_number" value="{{ level }}"/>
    <button type="submit" name="level+" onclick="changeLevel(1)">+</button>
</form>
        
<script>
    function changeLevel(change) {
        var x = document.getElementById("level_number");
        var y = document.getElementById("hidden_level_number");
        if (parseInt(x.innerHTML) + change >=0){
            x.innerHTML =  parseInt(x.innerHTML) + change;
            y.value=x.innerHTML;
        }
    }
</script>

answered Mar 29, 2022 at 12:17

Jaymit

481 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Obnoxius_Guy Over a year ago

Thanks! It is working now. I was actually trying to the update the level from the backend but updating it from the frontend and then updating it in the backend is easier.

Blurred0993 · Accepted Answer · 2022-03-29 11:57:59Z

0

If you want it to have server-side actions, you will probably need to create a HTML form of it to make the browser send a POST request to your websites API. If you want it to have client-side actions, you will need to create a Javascript script so the browser executes code when a user presses the button.

answered Mar 29, 2022 at 11:57

Blurred0993

1531 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to access a specific html in python Flask?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related