Javasript 函数更改一个 <div> 的 HTML 类，渲染，然后继续运行其余的函数代码

Question

我正在学习编程 HTML/CSS/Javascript。我创建了一个网页和一个 javascript 代码来获取 Access 数据库中的一些信息，然后将其呈现给用户。有时是一张大桌子。我只想在代码的开头和结尾更新一个类和一个innerHTML，以便向用户显示：“等等，页面正在加载”......在代码运行后，更改类和innerHTML没有（“”）那么给用户的消息就会消失。

我做了代码，但是当我的函数运行时，它不会在函数完成之前呈现对 class 和 innerHTML 的更改......

仅供参考：此时，HTML 已经呈现。Javascript 将通过单击页面上的按钮来执行。

我的 HTML - 我想用 Javascript 代码更新的类和 innerHTML。

    <section>

        <div id="RunningCode" class="">

            <span id="RunningCode1" class=""></span>

        </div>  

    </section>

我的JAVASCRIPT CODE在函数的开头。（这是我想在代码继续之前呈现/更新的内容

var YellowCard = document.getElementById("RunningCode");

YellowCard.className = "mensagemCodeRunning";

var YellowCard1 = document.getElementById("RunningCode1");

YellowCard1.className = "mensagemCodeRunningText";

YellowCard1.innerHTML = "Loading. Please Wait..."

然后我的JAVASCRIPT CODE在函数的末尾：

YellowCard1.className = "";

YellowCard1.innerHTML = ""

YellowCard.className = "";

Answer 1

重绘发生在函数执行之后，如果您将正在执行的 javascript 代码包含在 setTimeout() 中，您将能够在代码开始执行之前重绘 DOM。把这部分拉出来变成一个单独的函数var YellowCard = document.getElementById("RunningCode");YellowCard.className = "mensagemCodeRunning";var YellowCard1 = document.getElementById("RunningCode1");YellowCard1.className = "mensagemCodeRunningText";YellowCard1.innerHTML = "Loading. Please Wait..."像这样：function run(){&nbsp; &nbsp; var YellowCard = document.getElementById("RunningCode");&nbsp; &nbsp; YellowCard.className = "mensagemCodeRunning";&nbsp; &nbsp; var YellowCard1 = document.getElementById("RunningCode1");&nbsp; &nbsp; YellowCard1.className = "mensagemCodeRunningText";&nbsp; &nbsp; YellowCard1.innerHTML = "Loading. Please Wait...";&nbsp; &nbsp; setTimeout(getSpecificSupplier(), 0);&nbsp; &nbsp; function getSpecificSupplier() {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // need to redefine these variables&nbsp; &nbsp; &nbsp; &nbsp; var YellowCard = document.getElementById("RunningCode");&nbsp; &nbsp; &nbsp; &nbsp; var YellowCard1 = document.getElementById("RunningCode1");&nbsp; &nbsp; &nbsp; &nbsp; var Carrier_Name = Carrier_NameHTML.value;&nbsp; &nbsp; &nbsp; &nbsp; var cn = new ActiveXObject("ADODB.Connection");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; YellowCard1.className = "";&nbsp; &nbsp; &nbsp; &nbsp; YellowCard1.innerHTML = ""&nbsp; &nbsp; &nbsp; &nbsp; YellowCard.className = "";&nbsp; &nbsp; }}