title: Javasript function to change a HTML class of a <div>, render, then continue running the rest of the function code
body: <p>I am learning programming HTML/CSS/Javascript. I created a webpage and a javascript code to get some information within an Access database then render it to user. It is a big table sometimes.
  I just want to update a  class and an innerHTML at the beginning and in the end of the code, in order to show to the user: "Wait, page is loading"... and after the code runs, change the  class and innerHTML to nothing ("") then the message to user would disappear.</p>
  
  <p>I did the code, but when my function runs, it is not rendering the changes to class and innerHTML until the functions is finished... </p>
  
  <p>JUST FOR INFORMATION: At this point, the HTML is already rendered. The Javascript will act from a button click on the page.</p>
  
  <p>My HTML - The classes and innerHTML I want to update with Javascript code.</p>
  
  <pre><code>    &lt;section&gt;
          &lt;div id="RunningCode" class=""&gt;
              &lt;span id="RunningCode1" class=""&gt;&lt;/span&gt;
          &lt;/div&gt;  
      &lt;/section&gt;
  </code></pre>
  
  <p>My JAVASCRIPT CODE in the beginning of the function. (This is what I want to render/update before the code continue</p>
  
  <pre><code>var YellowCard = document.getElementById("RunningCode");
  YellowCard.className = "mensagemCodeRunning";
  
  var YellowCard1 = document.getElementById("RunningCode1");
  YellowCard1.className = "mensagemCodeRunningText";
  YellowCard1.innerHTML = "Loading. Please Wait..."
  
  </code></pre>
  
  <p>Then My JAVASCRIPT CODE in the end of the function:</p>
  
  <pre><code>YellowCard1.className = "";
  YellowCard1.innerHTML = ""
  
  YellowCard.className = "";
  
  </code></pre>
  
  <p>FULL JAVASCRIPT CODE:</p>
  
  <pre><code>function getSpecificSupplier() 
  { 
  
  var YellowCard = document.getElementById("RunningCode");
  YellowCard.className = "mensagemCodeRunning";
  
  var YellowCard1 = document.getElementById("RunningCode1");
  YellowCard1.className = "mensagemCodeRunningText";
  YellowCard1.innerHTML = "Loading. Please Wait..."
  
  var Carrier_Name = Carrier_NameHTML.value;
  
  var cn = new ActiveXObject("ADODB.Connection"); 
  
  var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = MySource;
  var rs = new ActiveXObject("ADODB.Recordset"); 
  
  
  var SQL = "select * from ...
  
  cn.Open(strConn); 
  rs.Open(SQL, cn); 
  
  var Linhas_da_Tabela = document.getElementById("Apagando");
  
  while(Linhas_da_Tabela.firstChild) {
      Linhas_da_Tabela.removeChild(Linhas_da_Tabela.firstChild);
  }
  
  while (!rs.eof) {
  
      var table = document.getElementById("mytable");
      var row = table.insertRow(-1);
      var cell0 = row.insertCell(0);
      var cell1 = row.insertCell(1);
      var cell2 = row.insertCell(2);
      var cell3 = row.insertCell(3);
      var cell4 = row.insertCell(4);
      var cell5 = row.insertCell(5);
      var cell6 = row.insertCell(6);
      var cell7 = row.insertCell(7);
      var cell8 = row.insertCell(8);
  
  
      cell0.innerHTML = rs1
      cell1.innerHTML = rs2
      cell2.innerHTML = rs3
      cell3.innerHTML = rs4
  
      var WholeDate = new Date(rs("Arrival Time"));
      var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
      var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
      var yyyy = WholeDate.getFullYear();
      var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
      var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());
  
      cell4.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";
  
      var WholeDate = new Date(rs("Gate IN"));
      var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
      var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
      var yyyy = WholeDate.getFullYear();
      var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
      var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());
  
      cell5.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";
  
      var WholeDate = new Date(rs("Dock IN"));
      var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
      var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
      var yyyy = WholeDate.getFullYear();
      var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
      var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());
  
      cell6.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";
  
      var WholeDate = new Date(rs("Dock OUT"));
      var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
      var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
      var yyyy = WholeDate.getFullYear();
      var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
      var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());
  
      cell7.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";
  
      var WholeDate = new Date(rs("Gate OUT"));
      var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
      var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
      var yyyy = WholeDate.getFullYear();
      var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
      var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());
  
      cell8.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";
  
  rs.MoveNext
  }
  
  rs.Close(); 
  cn.Close(); 
  
  YellowCard1.className = "";
  YellowCard1.innerHTML = ""
  
  YellowCard.className = "";
  
  
  }
  </code></pre>