Python + JavaScript について。リロードすると表示が消えます。

下記のサイトを参考に Python Eel を使って、PythonからJavaScript関数を呼びました。
正常に動作しますが、リロードすると表示が消えてしまいます。
解決方法はありますでしょうか？
よろしくお願いいたします。

参考サイト：https://qiita.com/inoory/items/f431c581332c8d500a3b

html
1<html>
2<head>
3    <meta charset="UTF-8">
4    <title>Eel</title>
5</head>
6<body>
7    <div id="target"></div>
8    <script type="text/javascript" src="/eel.js"></script>
9    <script type="text/javascript">
10        eel.expose(my_select)
11        function my_select(my_str) {
12            let values = my_str.split(',')
13            let html = "<select>"
14            for (var i = 0; i < values.length; i++){
15                html += "<option value=" + values[i] + ">" + values[i] + "</option>"
16            }
17            html += "</select>"
18            document.getElementById("target").innerHTML = html
19        }
20    </script>
21</body>
22</html>

python
1import eel
2
3my_str="ABC, DEF, GHI"
4eel.init("web")
5eel.my_select(my_str)
6eel.start("index.html")

technocore

2021/11/13 00:48

ブラウザの開発ツールでリロード前後のhtmlを確認比較してはいかがでしょう。どこが違っているかわかるれば、解決の手がかりになるはずです。

sgry

2021/11/13 03:02

ありがとうございます。 HTMLを確認しても、リロード前後で違いはありませんでした。リロードすると、JavaScriptが実行され、Pyhotnに書いたコードが実行されないためと思い、 JavaScript → Python → JavaScript となるようにしたら解決しました。

行動規範の内容に同意します

回答1件

自己解決

最初に実行する Pythonコードは初期読み込み時のみ実行されるということが理解できていませんでした。

初期読み込み時 Python(初期読み込み時のみ実行される) → JavaScript
リロード時 JavaScript

以下の流れにしたら、解決しました。
初期読み込み時 Python(初期読み込み時のみ実行される) → JavaScript → Python → JavaScript
リロード時 JavaScript → Python → JavaScript

HTML
1<html>
2<head>
3    <meta charset="UTF-8">
4    <title>Eel</title>
5</head>
6<body>
7    <div id="target"></div>
8    <script type="text/javascript" src="/eel.js"></script>
9    <script type="text/javascript">
10        eel.python_function()
11        eel.expose(my_select)
12        function my_select(my_str) {
13            let values = my_str.split(',')
14            let html = "<select>"
15            for (var i = 0; i < values.length; i++){
16                html += "<option value=" + values[i] + ">" + values[i] + "</option>"
17            }
18            html += "</select>"
19            document.getElementById("target").innerHTML = html
20        }
21    </script>
22</body>
23</html>

Python
1import eel
2
3eel.init("web")
4
5@eel.expose
6def python_function():
7    my_str = "ABC, DEF, GHI"
8    eel.my_select(my_str)
9
10eel.start("index.html")