Python Eel - Javascript running prematurely

Question

I am trying to learn to use the Python eel library. Specifically, I am attempting to call a Python function by clicking a button (that runs a JavaScript function).

In my folder I have four files, arranged like this:

|
+--- main.py
|
+--- web-gui
     |
     +--- index.html
     |
     +--- main.js
     |
     +--- style.css

Here is my main.py:

# Start GUI using eel

import eel

eel.init('web-gui')
eel.start('index.html', size=(1440, 900), block=False)

# Boolean data from javascript (true or false) is given to python

result = eel.js_startPython()()

print('Javascript says hello! Your result is', bool(result))

Here is my main.js:

// Javascript passes data to Python when button is pushed

document.getElementById("data").addEventListener("click", js_startPython);

eel.expose(js_startPython); // Expose this function to Python
function js_startPython() {
    console.log('successful button click')
    return result = true;    
}

And here is my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Decider</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="container">
        <div class="text">
            <h1>
                The Python Decider
            </h1>
            <p>
                Have a yes/no question? Click on the button to find out your answer.
            </p>
        </div>
        <div class="button">
            <div class="flex align-midde align-center">
                <a class="button glow-button" href="#" id="data">Click me!</a>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="/eel.js"></script>
    <script type="text/javascript" src="main.js"></script>
    
</body>
</html>

I expect that, when I press the button, python console will return this:

>>> Javascript says hello! Your result is True

My current issue is that the JavaScript code is running without being called. Without pressing anything, it displays

>>> Javascript says hello! Your result is True # before button is even pressed

Sorry about the really long post. I appreciate any answers. I also apologize if this question has already been asked on SO, but I'm pretty sure it hasn't been.

score 0 · Accepted Answer · answered Nov 02 '20 at 10:39

Your understanding of how Eel interacts with JS is wrong. Currently, your Python code is calling js_startPython() after eel.start(). The eel.expose(js_startPython) function exposes the JS function to Python, what you want to do is expose a Python function to your JS, using the decorator functions @eel.expose:

Python

@eel.expose
def py_startJavaScript(result):
    print('Javascript says hello! Your result is', bool(result))

JavaScript

document.getElementById("data").addEventListener("click", eel.js_startPython(true));

I also noticed that you have block=False on your eel.start(), which means that eel will stop after that line. You can avoid that by adding the following underneath:

while True:
    eel.sleep(10)

Thanks for pointing this out. I had realized it too after some time, and got it working, but I didn’t update the question on SO. Your answer should now show as the accepted solution for anyone who makes the same mistake. — JS4137, Nov 03 '20 at 12:06

Python Eel - Javascript running prematurely

1 Answers1