Загрузить таблицу после завершения функции

Question

У меня есть таблица, которая по умолчанию скрыта, и я хочу отображать ее только после завершения функции JavaScript (frameLooper()). Функция JavaScript (frameLooper()) отображает текстовые сообщения во время страницы load.I пытался

document.getElementById("myTypingText1").style.display = ""; 

но это не сработает. // CSS

<style type="text/css"> 
#myTypingText1 { 
display: none; 
} 
</style> 

<div id="myTypingText"></div> 
<table id ="myTypingText1" class="table table-condensed table-striped table-bordered"> 
<caption><h3>Cash Flow and Releases Under Construction</h3></caption> 
<thead> 
    <tr> 
     <th>Overdue</th> 
     <th>Batch No</th> 
     <th>Collector</th> 
     <th>Applicable year</th> 
     <th>Borrower</th> 
     <th>Area</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Under Construction</td> 
     <td>Under Construction</td> 
     <td>Under Construction</td> 
     <td>Under Construction</td> 
     <td>Under Construction</td> 
     <td>Under Construction</td> 
    </tr> 
</tbody> 
</table> 

<script type="text/javascript"> 
var myString = "blah blah balah blah blahautomatically notified by your programmer electronically...lets roll and keep our hands dirty..Drink beer eat kitkat.."; 
var myArray = myString.split(""); 
var loopTimer; 
    function frameLooper() { 
     if(myArray.length > 0) { 
     var char = myArray.shift(); 
      if(char == "^"){ 
       document.getElementById("myTypingText").innerHTML; 
      } else { 
       document.getElementById("myTypingText").innerHTML += char; 
       } 
     } else { 
     clearTimeout(loopTimer); 
      return false; 
     } 
     loopTimer = setTimeout('frameLooper()',50); 
     document.getElementById("myTypingText1").style.display = ""; 
    } 
     frameLooper();   
</script> 

Answer 1

display = ""; не работает, потому что ваш CSS будет перезаписывать ее. положите display = "block"; (это значение по умолчанию visible и перезапишите css)

У вас есть еще одна проблема, хотя это то, что вы показываете таблицу после каждого отображения персонажа. Вероятно, вы хотите отобразить его только после завершения анимации? Таким образом, вы должны переместить этот код отображения, где он будет работать только тогда, когда myArray.length == 0

Answer 2

Я нашел solution.I добавить функцию в моем файле JavaScript

<script type="text/javascript"> 
window.onload = function() { 
    var tble = document.getElementById("myTypingText1"); 
    tble.style.display = "none"; 
} 
var myString = "Cashflow and releases is under construction.It's code is blah and balah and balh and blah automatically notified by your programmer electronically...lets roll and keep our hands dirty..Drink beer eat kitkat.."; 
var myArray = myString.split(""); 
var loopTimer; 
    function frameLooper() { 
     if(myArray.length > 0) { 
     var char = myArray.shift(); 
      if(char == "^"){ 
       document.getElementById("myTypingText").innerHTML; 
      } else { 
       document.getElementById("myTypingText").innerHTML += char; 
       } 
     } else { 
     clearTimeout(loopTimer); 
     showTable(); 
      return false; 
     } 
     loopTimer = setTimeout('frameLooper()',50); 
    } 
    function showTable(){ 
     document.getElementById("myTypingText1").style.display= ""; 
    } 
    frameLooper(); 
    //showTable();