仅当条件为 True 时才使用 Eel 在 python 中调用 JavaScript 函数

Question

Describe the problem I am trying to call a JavaScript function but only when a if condition evaluates to True in Python.描述我试图调用 JavaScript 函数但仅当在 Python 中 if 条件计算为 True 时的问题。 I'm working on a Music player project with Pygame and Eel, I want to call the JS function to change Song cover image automatically without a button click as the previous song ends, which am finding using pygame.mixer.music.get_busy() in python, during when I want to call the 'eel.fine()' but I'm sure why it's not working or how to get this done as am new to Eel我正在使用 Pygame 和 Eel 进行音乐播放器项目，我想调用 JS 函数来自动更改歌曲封面图像，而无需在上一首歌曲结束时单击按钮，这是使用 pygame.mixer.music.get_busy() 找到的在 python 中，当我想调用“eel.fine()”时，但我确定为什么它不起作用或如何完成这项工作，因为我是 Eel 新手

Expected When if condition becomes True function find should be called from python code ie just want to change cover image when one song ends Code snippet(s) Here is some code that can be easily used to reproduce the problem or understand what I need help with.预期当条件变为真函数 find 应该从 python 代码调用即只想在一首歌结束时更改封面图像代码片段这里有一些代码可以很容易地用来重现问题或了解我需要什么帮助. Note: I have removed most part of the code just to make to understand and have only added the portions that relate to the flow of the code what I need help with.注意：我删除了大部分代码只是为了理解，只添加了与代码流程相关的部分，我需要帮助。

import eel
from pygame import mixer

eel.init('web')


js='function $fine(){document.getElementById("spl").live("click");}'
def my_update():
    if pausev and not fine:
        if not start and not mixer.music.get_busy():
            #ok=js2py.eval_js(js)
            # ok()
            print("booom")
            eel.fine()  # This is the part I need help with
            play()
            print('new song up')
        else:
            print('old playing still')
    else:
        print('strictly paused')

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Aishu's Magic-Music</title>
    <link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="/eel.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
        eel.expose(fine);
      function fine(){
      document.getElementById("spl").live("click");

      }
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>
    <section class="wellcome_area clearfix" id="home">
      <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12 col-md">
                    <div class="get-start-area">
                        <form class="form-inline">
                            <input type="button" id="repeat" class="submit" value="▶ Shower" onclick="generateQRCode(7)">
                            <input type="button" id="spl" class="submit" value="▶ Play" onclick="generateQRCode(2)">
                            <input type="button" class="submit" value=">> Skip" onclick="generateQRCode(3)">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="welcome-thumb ">
            <img id="qr" class="headshot headshot-1" src="img/bg-img/play.jpg" width="50%">
        </div>
    </section>

</body>
</html>

// main.js
var whatever=1;
var loop_check=1;
function generateQRCode(data) {
    if(data==2){
    change()
     if(whatever==1){
        eel.generate_qr(1)(setImage);
        whatever=0;
    }
    else
    {
        eel.generate_qr(data)(setImage)

    }
    }
    else if(data==7){
    change_loop()
    eel.generate_qr(data)(setImage)
    }
    else{
    eel.generate_qr(data)(setImage)
    }
}
function change() 
{
    var elem = document.getElementById("spl");
    if (elem.value=="|| Pause") elem.value = "▶ Play";
    else elem.value = "|| Pause";

}
function setImage(base64) {
    document.getElementById("qr").src = base64
}

UPDATE It partially works and does not work as expected更新它部分工作，并没有按预期工作 is the Error that I get during running normally是我在正常运行过程中遇到的错误

Whereas the Output when I open inspect - console而当我打开检查时的输出 - 控制台

Desktop :桌面：

OS: Windows操作系统：Windows
Browser chrome浏览器镀铬
Version 94版本 94

Answer 1

I've solved it after lots of trail and error, since I'm new to JavaScript, Eel and connecting both with Python, I only later realised that in my code, I have tried using经过大量的跟踪和错误，我已经解决了它，因为我是 JavaScript、Eel 和 Python 的新手，后来我才意识到在我的代码中，我尝试使用

document.getElementById("spl").live("click");

and和

document.getElementById("spl").trigger("click");

and while I used当我使用

document.getElementById("spl").click();

earlier had missed to expose the JavaScript function, hence when I tried using .click() again after exposing I realise this is what I've been missing the whole time.早些时候错过了公开 JavaScript 函数，因此当我在公开后再次尝试使用.click()时，我意识到这是我一直以来都错过的。 Although in JavaScript without Eel, as stated here and here works more or less the same, but for some reason when used with Eel creates this weird pausing thing to cause in debugger only and create a websocket error if not.虽然在没有 Eel 的 JavaScript 中，正如此处和此处所述，工作原理或多或少相同，但由于某种原因，当与 Eel 一起使用时，会产生这种奇怪的暂停，仅在调试器中会导致，否则会产生 websocket 错误。

Glad that I was finally able to find a way that actually works.很高兴我终于能够找到一种真正有效的方法。

仅当条件为 True 时才使用 Eel 在 python 中调用 JavaScript 函数

问题描述

1 个解决方案

解决方案1
0 2021-10-27 08:29:56

仅当条件为 True 时才使用 Eel 在 python 中调用 JavaScript 函数

问题描述

1 个解决方案

解决方案1 0 2021-10-27 08:29:56

解决方案1
0 2021-10-27 08:29:56