Python Eel - Javascript running prematurely

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.

Solution

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)