Why is my answer compiling and shows only after i press quit?

var students =[
  {name:"DAVE",Track:'Web developer', Achievement:434 ,Points:432},
  {name:'ROBERT',Track:'killer', Achievement:343 ,Points:345},
  {name:'ERIC',Track:'scientist', Achievement:34 ,Points:432},
  {name:'OSTA',Track:'app maker', Achievement:2342 ,Points:2342},
  {name:'ELISE', Track:'Front end dev', Achievement:123,Points:314}





]
var HTML=' ';
var message = '';
function print(HTML){
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = HTML;

}
function List(i){
HTML += '<ol>'  
HTML +='<li><h2>Name: '+students[i].name+'</h2></li>'
HTML +='<li>Track: '+students[i].Track+'</li>'
HTML +='<li>Achievements:'+students[i].Achievement+'</li>'
HTML +='<li>Points: '+students[i].Points+'</li>'
HTML +='</ol>'
return HTML;
}

while(true){

var UserInput=prompt("What is your name, type your [name][Dave, Osta, etc] and then type [quit] to see your info");
if (UserInput.toUpperCase() === students[0].name){
print(List(0));
}
else if(UserInput.toUpperCase() === students[1].name){
print(List(1));
}
else if(UserInput.toUpperCase() === students[2].name){
print(List(2));
}
else if(UserInput.toUpperCase() === students[3].name){
print(List(3));
}
else if(UserInput.toUpperCase() === students[4].name){
print(List(4));
}
else if(UserInput.toUpperCase() === 'QUIT'|| UserInput===null){
  break;
}
  }