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>