javascript - Why Chrome doesn't show applied html changes until the prompt got cancelled? -


let me clear it.

the program wrote prompts name , looks among array of objects. if finds name print name , other details of person in div. keep on searching until type quit.

no problem code. in chrome not show found results until type quit (aka break loop). test code in firefox , shows results immediately. can tell me why?

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 looking for?");    answer = answer.tolowercase();    while (answer!='quit'){                      (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 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;  }    {    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>

call prompt chrome browser block page rendering.

use requestanimationframe or settimeout can solve problem

some answers here take color prompt


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -