2017-08-15 4 views
3

私はそれをクリアさせてください。プロンプトがキャンセルされるまでChromeで適用されたhtml変更が表示されないのはなぜですか?

私が書いたプログラムは、名前としてを入力し、オブジェクトの配列の中でそれを探します。名前を見つけたら、その人の名前とその他の詳細をdivに表示します。私はquitと入力するまで検索を続けます。

コードに問題はありません。 クロムを表示を入力してquit(別名ループを壊す)まで入力してください。私はFirefoxで自分のコードをテストし、すぐに結果を表示します。なぜか教えてくれますか? Chromeブラウザと

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は、ページのレンダリングをブロックします。

使用​​またはsetTimeoutは、いくつかの答えがtake color from prompt

0

Chromeブラウザが自動的にページのレンダリングをブロックしますpromptしたがって、クロムのブラウザをサポートしていませんここにある問題

を解決することができます。これは、古いバージョンのChromeを使用している可能性がありますので、更新する必要があります。

短い長い話をカットするには、ちょうど私がこれらのウェブサイトから自分の情報を得たこれら二つの

requestAnimationFrame 

setTimeout 

のいずれかを使用できます。 https://css-tricks.com/using-requestanimationframe/ https://www.w3schools.com/JSREF/met_win_setTimeout.asp

関連する問題