Menu
Let me clear it.
The program which I wrote prompts for a name and then looks for it among an array of objects. if it finds the name then print the name and other details of that person in a div. it keep on searching until i type quit.
No problem with code. Just in chrome it does not show found results until I type quit (aka break the loop). I test my code in Firefox and it shows results immediately. Can you 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 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>
987
asked Nov 19 '25 00:11
call prompt with chrome browser will block page rendering.
use requestAnimationFrame or setTimeout can solve the problem
some answers are here take color from prompt
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
