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:43pxn'
             '}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.

Answer

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