JS不显示结果| 蟒蛇| 鳗鱼

Question

我无法解决问题。 我写了一个程序，这里是它的简短描述：一个应用程序，其逻辑是用python编写的，界面是用HTML和CSS呈现的。 Python 导入模块eel 。 Python 有一个返回数组的函数。 在 JS 中，创建一个变量来获取函数的结果，然后将结果写入 HTML 类。 这是它的外观：

• Python代码

   import eel import datetime import sys eel.init("web") isoWD = datetime.datetime.today().isoweekday() @eel.expose def some_func(): if isoWD == 1: result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems'] elif isoWD == 2: result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems'] elif isoWD == 3: result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems'] elif isoWD == 4: result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems'] elif isoWD == 5: result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems'] elif isoWD == 6: result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems'] elif isoWD == 7: sys.exit() return result eel.start("main.html", size=(325, 450))

• HTML代码

 function display() { var res = eel.some_func(); for (var i = 0; i <= 'block__les'.length; i++) { document.getElementsByClassName('block__les')[i].innerHTML = res[i]; } } display();

 <div class="wrapper"> <div class="block"> <div class="block__num"> <p>(1)</p> </div> <div class="block__les"></div> <div class="block__time">09.00 - 09.30</div> </div> <div class="block"> <div class="block__num"> <p>(2)</p> </div> <div class="block__les"></div> <div class="block__time">09.40 - 10.10</div> </div> <div class="block"> <div class="block__num"> <p>(3)</p> </div> <div class="block__les"></div> <div class="block__time">10.20 - 10.50</div> </div> <div class="block"> <div class="block__num"> <p>(4)</p> </div> <div class="block__les"></div> <div class="block__time">11.00 - 11.30</div> </div> <div class="block"> <div class="block__num"> <p>(5)</p> </div> <div class="block__les"></div> <div class="block__time">11.40 - 12.10</div> </div> <div class="block"> <div class="block__num"> <p>(6)</p> </div> <div class="block__les"></div> <div class="block__time">12.20 - 12.50</div> </div> <div class="block"> <div class="block__num"> <p>(7)</p> </div> <div class="block__les"></div> <div class="block__time">13.00 - 13.30</div> </div> <div class="block"> <div class="block__num"> <p>(8)</p> </div> <div class="block__les"></div> <div class="block__time">13.40 - 14.10</div> </div> </div>

输出：

数组元素应该在数字和时间之间输出。 但那里是空的。

Answer 1

为了获得暴露给 eel 的 python 函数发送的结果，javascript 函数display应该成为async函数，我们应该等待来自 python 函数的结果。

因此，显示函数变为：

<script type="text/javascript">
async function display() {
  var res=await eel.some_func()();
  for (var i = 0; i <= document.getElementsByClassName('block__les').length ; i++) {
    document.getElementsByClassName('block__les')[i].innerHTML = res[i];
  }
}
display();
</script>

还有一点需要提一下，不过和eel没有关系，在display函数中， 'block__les'.length没有给出类 'block__les' 的项数，而是给出了单词block__les的字符数，其中是10 。

并且为了“block__les”类的项目数，我们可以使用document.getElementsByClassName('block__les').length ，它给出了8 ，正确的数字。

当然，不要忘记把

<script type="text/javascript" src="/eel.js"></script>

在main.html的 head 部分

最后不要忘记更改：

result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems']

变成 8 个项目以匹配 HTML 中显示的项目数量。

result = ['elems', 'elems', 'elems', 'elems', 'elems', 'elems', 'elems', 'elems']