[FIXED] Running a python function inside html code

Issue

I am making some python code for web development, but I am not strong in html, so I am creating my own module to help me, I have my file pyWebDev.py with this code so far:

def text(content, underlined=False, highlighted=None, bold=False, italic=False, color=None, position=None):
    style = "style='"
    
    if underlined:
        style += "text-decoration: underline; "
    
    if highlighted:
        style += f"background-color: {highlighted}; "
    
    if bold:
        style += "font-weight: bold; "
    
    if italic:
        style += "font-style: italic; "
    
    if color:
        style += f"color: {color}; "

    if position:
        style += f"position: absolute; top: {position[1]}px; left: {position[0]}px; "
    
    style += "'"
    
    return f"<div {style}>{content}</div>"

def entryBox(id, position=None):
    if position:
        style = f"style='position: absolute; top: {position[1]}px; left: {position[0]}px;'"
    else:
        style = ""
    return f"<input type='text' id='{id}' {style}>"

def button(label, onclick=None, position=None):
    if position:
        style = f"style='position: absolute; top: {position[1]}px; left: {position[0]}px;'"
    else:
        style = ""
    
    if onclick:
        return f"<button {style} onclick='{onclick}'>{label}</button>"
    else:
        return f"<button {style}>{label}</button>"

def app():
    "Welcome to Web development module!"


app()

and my main.py file looks like this:

from flask import Flask, render_template_string
import pyWebDev as PWD

app = Flask(__name__)

def clicked():
    print("Hello World")

@app.route('/')
def hello_world():
    html_content = ''
    html_content += PWD.text("Hello World", position=(200, 100))
    html_content += PWD.text("Hello World", position=(200, 200), underlined=True)
    html_content += PWD.button("Hello World", position=(200, 300), onclick="clicked()")
    return render_template_string(html_content)

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=7824)

When I click the button, It doesn't seem to call the clicked() function, how can I make this work? I want to change the module so I can fully code in the main.py without using html there. Can someone please help me?

Solution

The problem seems to be that you define your clicked function in python and not in the javascript of your module.

So any function passed to an HTML-Eventhandler (like onClick that handles events where user clicks a button or onMouseOver that hand) has to be written in Javascript. So you could define a python function that inserts a script tag. Something like this:

def javascriptOnclick():
    return '<script>function clicked() {console.log("hello world"}</script>'

If you add that to your html_code variable it should work. So the answer to your question running python function code in html is that it is not possible in the way you tried here.

Additionally to your question I want to advise you that the approach you have here seems overly complicated and not very scalable. Therefore I recommend you take a look at this flask tutorial. It is a huge tutorial and might seems overwhelming but it will save you a ton of time later on.

Answered By - Lenntror