2017-08-15 46 views
3

讓我清除它。爲什麼Chrome在提示取消之前不顯示應用的html更改?

我編寫的程序提示作爲名稱,然後在一個對象數組中查找它。如果找到該名稱,則在div中打印該人的姓名和其他詳細信息。它繼續搜索,直到我輸入quit

代碼沒問題。只是在chrome它不是顯示找到結果,直到我輸入quit(aka打破循環)。我在Firefox中測試我的代碼,並立即顯示結果。你能告訴我爲什麼嗎?

var answer = ''; 
 
var html=''; 
 
var students = [ 
 
    {name:"peter",age:24,track:'front-end',achivements:15,scores:748}, 
 
    {name:"dave",age:23,track:'back-end',achivements:11,scores:433}, 
 
    {name:"leo",age:22,track:'front-end',achivements:14,scores:71}, 
 
    {name:"juan",age:21,track:'ios',achivements:22,scores:442}, 
 
    {name:"eli",age:26,track:'android',achivements:24,scores:711} 
 
]; 
 

 

 
function printer (message){ 
 
    
 
    var div = document.getElementById("output"); 
 
    div.innerHTML += message; 
 
} 
 

 
    answer = prompt("Who are you looking for?"); 
 
    answer = answer.toLowerCase(); 
 

 
while (answer!='quit'){ 
 
    
 
    
 
     for (var z=0;z<students.length;z++){ 
 
     var student = students[z]; 
 
     if (answer=== student.name){ 
 
      html = '' 
 
      html +='<p><b>Student: '+student.name+'</b></p>'; 
 
      html +='<p>Track: '+student.track+'</p>'; 
 
      html +='<p>Points: '+student.scores+'</p>'; 
 
      html +='<p>Achievements: '+student.achivements+'</p></br>'; 
 
      printer(html);  
 
      
 
            } 
 

 
              } 
 
    
 
     answer = prompt("Who are you looking for?"); 
 
     answer = answer.toLowerCase(); 
 
}
@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css'); 
 

 
/*General*/ 
 
body { 
 
    background: #fff; 
 
    max-width: 980px; 
 
    margin: 0 auto; 
 
    padding: 0 20px; 
 
    font: Helvetica Neue, Helvectica, Arial, serif; 
 
    font-weight: 300; 
 
    font-size: 1em; 
 
    line-height: 1.5em; 
 
    color: #8d9aa5; 
 
} 
 

 
a { 
 
    color: #3f8aBf; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: #3079ab; 
 
} 
 

 
a:visited { 
 
    color: #5a6772; 
 
} 
 

 
h1, h2, h3 { 
 
    font-weight: 500; 
 
    color: #384047; 
 
} 
 

 
h1 { 
 
    font-size: 1.8em; 
 
    margin: 60px 0 40px; 
 
} 
 

 
h2 { 
 
    font-size: 1em; 
 
    font-weight: 300; 
 
    margin: 0; 
 
    padding: 30px 0 10px 0; 
 
} 
 

 
#home h2 { 
 
    margin: -40px 0 0; 
 
} 
 

 
h3 { 
 
    font-size: .9em; 
 
    font-weight: 300; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
h3 em { 
 
    font-style: normal; 
 
    font-weight: 300; 
 
    margin: 0 0 10px 5px; 
 
    padding: 0; 
 
    color: #8d9aa5; 
 
} 
 

 
ol { 
 
    margin: 0 0 20px 32px; 
 
    padding: 0; 
 
} 
 

 
#home ol { 
 
    list-style-type: none; 
 
    margin: 0 0 40px 0; 
 
} 
 

 
li { 
 
    padding: 8px 0; 
 
    display: list-item; 
 
    width: 100%; 
 
    margin: 0; 
 
    counter-increment: step-counter; 
 
} 
 

 
#home li::before { 
 
    content: counter(step-counter); 
 
    font-size: .65em; 
 
    color: #fff; 
 
    font-weight: 300; 
 
    padding: 2px 6px; 
 
    margin: 0 18px 0 0; 
 
    border-radius: 3px; 
 
    background:#8d9aa5; 
 
    line-height: 1em; 
 
} 
 

 
.lens { 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 8px solid transparent; 
 
    border-bottom: 8px solid transparent; 
 
    border-right: 8px solid #8d9aa5; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    margin: 5px 0 0 -19px; 
 
} 
 

 
#color div { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    margin: 5px; 
 
} 
 

 
span { 
 
    color: red; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>List Of Students</title> 
 
    
 
    
 

 
</head> 
 
<body> 
 
<h1>Found Students</h1> 
 
<div id="output"> 
 

 
</div> 
 
</body> 
 
</html>

回答

1

呼叫prompt與Chrome瀏覽器會阻止網頁渲染。

使用​​或setTimeout可以解決的問題

一些答案在這裏take color from prompt

相關問題