CODEWITHSUNDEEP
pythonhtmlflask
user15805826
user15805826

Reputation:

python function in button onclick

I know some one has already asked this question but I couldn't find the answer I was looking for. I am learning flask and I am creating a tic tac toe game, this is the code:

from flask import Flask
from flask import request
from flask import url_for
from flask import render_template

squares = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
]
turn = 'X'

app = Flask(__name__)


@app.route('/games/tic-tac-toe')
def tic_tac_toe():
    global squares, turn
    # this is the game board
    table = ('<!DOCTYPE html>\n'
             '<html>\n'
             '<head>\n'
             '<style>\n'
             '.square {\n'
             '  height: 55px;\n'
             '  width: 55px;\n'
             '  background-color: #ffffff;\n'
             '  border-style: solid;\n'
             '  border-color: black;\n'
             '  border-width: 4px;\n'
             '  text-align:center;\n'
             '  font-size:43px\n'
             '}\n'
             '.grid {\n'
             '  display: grid;\n'
             '  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));\n'
             '}\n'
             '</style>\n'
             '</head>\n'
             '<body>\n'
             '\n'
             '<div class="grid">\n'  # ------------row 1------------
             f' <button class="square" onclick="{react_to_click(0, 0, "s1")}" id="s1">{squares[0][0]}</button>\n'
             f' <button class="square" onclick="{react_to_click(0, 1, "s2")}" id="s2">{squares[0][1]}</button>\n'
             f' <button class="square" onclick="{react_to_click(0, 2, "s3")}" id="s3">{squares[0][2]}</button>\n'
             '</div>\n'
             '<div class="grid">\n'  # ------------row 2------------
             f' <button class="square" onclick="{react_to_click(1, 0, "s4")}" id="s4">{squares[1][0]}</button>\n'
             f' <button class="square" onclick="{react_to_click(1, 1, "s5")}" id="s5">{squares[1][1]}</button>\n'
             f' <button class="square" onclick="{react_to_click(1, 2, "s6")}" id="s6">{squares[1][2]}</button>\n'
             '</div>\n'
             '<div class="grid">\n'  # ------------row 3-------------
             f' <button class="square" onclick="{react_to_click(2, 0, "s7")}" id="s7">{squares[2][0]}</button>\n'
             f' <button class="square" onclick="{react_to_click(2, 1, "s8")}" id="s8">{squares[2][1]}</button>\n'
             f' <button class="square" onclick="{react_to_click(2, 2, "s9")}" id="s9">{squares[2][2]}</button>\n'
             '</div>\n'
             '\n'
             '</body>\n'
             '</html> \n')
    return table


# a function for tic tac toe game
def react_to_click(clicked_square_row, clicked_square_column, square_id):
    global turn, squares
    temp_turn = turn

    if squares[clicked_square_row][clicked_square_column] == '':
        if turn == 'X':
            turn = 'O'
        else:
            turn = 'X'
        squares[clicked_square_row][clicked_square_column] = temp_turn

app.run(debug=True)

the problem is in my buttons. I specified a python function but onclick can only take js functions. I want to activate the react_to_click function and give some arguments every time a square is clicked.

Upvotes: 0

Views: 562

Answers (1)

eagr
eagr

Reputation: 436

You need to define a js function that will post to a url which flask will have another route for.

Upvotes: 0

Related Questions