时间戳

首页 > 解决方案 > 如果程序需要时间运行，innerHTML 代码不起作用？

javascript - 如果程序需要时间运行，innerHTML 代码不起作用？

问题描述

我有一个 Python 程序，在生成输出之前运行大约需要 5 到 6 秒。此输出将“馈入”到 HTML 页面中。编写了一个 javascript 来促进这一系列操作： 1. 获取今天的日期 2. 将今天的日期输入 python，它将访问 Googlesheet 数据库并返回一个输出，该输出将传递回 Javascript 3. Javascript 将此输出放入页面通过document.getElementById('elem').innerHTML方法。

我的 HTML 页面未反映更改并显示默认 HTML 文本。我决定省略我的 Python 代码，因为我知道 Python 程序按预期方式工作。但如果需要，我很乐意补充它。希望有人可以帮助我：

测试.html

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <title>Timetrack</title>
    </head>

    <body onload="writeToFrontend()"> 
        <div id="clockingMode">Loading...</div>
    <script src="../attendance_mod.js"></script>
    </body>
</html>

测试.js

let {PythonShell} = require('python-shell');

function getCurrentDate() {
    // These are just some codes to get today's date
    var tmonth=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var d=new Date();
    var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
    if(ndate<=9) ndate="0"+ndate;
    var todayDate = ndate+"-"+tmonth[nmonth]+"-"+nyear;

    console.log('Today\'s Date is: '+todayDate);
    return todayDate;
}

function activatePython() {
    // Today's date is fed into Python program to generate an output message, output message intended to go into HTML
    let options = {
        mode: 'text',
        pythonPath: 'env/bin/python',
        pythonOptions: ['-u'], // get print results in real-time
        scriptPath: '', // this is just the directory to the script path, do not include name of script.
        args: [getCurrentDate()]
      };

      PythonShell.run('clocking_mode.py', options, function (err, results) {
        if (err) throw err;
        // results is an array consisting of messages collected during execution
        console.log('results: %j', results);
        console.log(results[(results.length-1)]);
        return results[(results.length-1)];
      });
}

async function writeToFrontend() {
  var clockingMode = await activatePython()
    .then(() => document.getElementById('clockingMode').innerHTML='<p>'+clockingMode+'</p>')
    .catch((err) => console.error(err));
}

这些是我运行检查时收到的错误消息：

Uncaught ReferenceError: writeToFrontend is not defined
    at onload (test.html:8)
onload @ test.html:8

Uncaught SyntaxError: Cannot use import statement outside a module

标签： javascripthtmlinnerhtml

解决方案

推荐阅读