I do graphical interface for the program in python with the help of eel. How to make so that at the touch of a button in html page displays the data specified in python?
Here is an example:
import eel
eel.init ( "web")
@ eel.expose
def get_upp (place):
text = "start"
return text
eel.start ( 'index.html', size = (700, 700))
& lt;! doctype HTML & gt;
& lt; html & gt;
& lt; Head & gt;
& lt; Meta Charset = "UTF-8" & gt;
& lt; Meta http-equiv = "x-ua-compatible" content = "ie = edge" & gt;
& lt; Meta name = "ViewPort" CONTENT = "WIDTH = device-width, initial-scale = 1.0" & gt;
& Lt; script src = "eel.js" & gt; & lt; / script & gt;
& Lt; link rel = "stylesheet" href = "style.css" & gt;
& lt; Title & gt; Document & lt; / Title & gt;
& lt; / Head & gt;
& lt; Body & gt;
& Lt; div class = "box" & gt;
& Lt; button id = "btn" & gt; Start & lt; / button & gt;
& Lt; div id = "info" & gt; & lt; / div & gt;
& lt; / div & gt;
& Lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" & gt; & lt; / script & gt;
& lt; script & gt;
async function display_upp () {
let res = await ell.get_upp (place) ();
document.getElementById ( 'info') innerHTML = res.;
}
jQuery ( '# btn'). on ( 'click', function () {
display_upp ();
});
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
I need to text with Python output to a tag by pressing
button
Answer 1, Authority 100%
When you run the code at present opens a browser window, press CTRL + SHIFT + I
, to open the console, where you can catch a significant portion of errors JS.
-
https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
a version of jQuery is not there, you can change, for example,3.3.1
-
ell.get_upp (place) ();
The firsteel
, secondly,ReferenceError: place is not defined
variable is not declared. It is necessary in advance to give it the desired value.
test.py
import eel
eel.init ( "web")
@ eel.expose
def get_upp (place):
text = "start"
return (text, place) # just to make sure that the parameter also works.
eel.start ( 'index.html', size = (700, 700))
web / index.html (a piece of JS is also possible to make a separate file)
& lt;! doctype HTML & gt;
& lt; html & gt;
& lt; Head & gt;
& lt; Meta Charset = "UTF-8" & gt;
& lt; Meta http-equiv = "x-ua-compatible" content = "ie = edge" & gt;
& lt; Meta name = "ViewPort" CONTENT = "WIDTH = device-width, initial-scale = 1.0" & gt;
& Lt; script src = "eel.js" & gt; & lt; / script & gt;
& lt; Title & gt; Document & lt; / Title & gt;
& lt; / Head & gt;
& lt; Body & gt;
& Lt; div class = "box" & gt;
& Lt; button id = "btn" & gt; Click Me & lt;! / Button & gt;
& Lt; div id = "info" & gt; & lt; / div & gt;
& lt; / div & gt;
& Lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" & gt; & lt; / script & gt;
& lt; script & gt;
$ ( '# Btn'). On ( 'click', async function () {
let place = prompt ( 'Enter the place:', 'Russia');
let res = await eel.get_upp (place) ();
$ ( '# Info') html (res).;
});
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
* In addition, pay attention of the reader who is not familiar with the eel
: it is assumed that next to the file test.py
is the folder web
, inside it : index.html