功能未按正确顺序运行

Question

in my while loop I was hoping it will keep prompting the user for entry unless I break out of the loop. However, once I get into my if block it wont to peform printToScreen(message) function unless I terminate the code.

Not sure what I am doing wrong here. I am expecting it to print message before continuing to prompt. how can I fix this?

let message;
let search;

function printToScreen(message){
  let outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;  
}

function promptUser (){
    search = prompt("Enter student name");
return search;
}


function searchStudent(){

  while(true){

  search =promptUser();

  for(let i = 0; i<students.length; i++){

    if(search.toLowerCase() === students[i].name.toLowerCase())
    {
      let student = students[i];
      message = `<h4>Student: ${student.name}</h4>`; 
      message += `<p> Track: ${student.track} 
                  <br> Achievements:${student.achievements}
                  <br> Points: ${student.points}
                  </p>`; 
      printToScreen(message);
    }

    else if( search ===null || search.toLowerCase() === 'quit'){
      message = `<p>Thanks.Goodbye! </p>`;

      printToScreen(message);
      break;
    }   
    else{
         message = `<p> Student ${search} does not exist. Try Again!</p>`;
         printToScreen(message);
        }      
     }
  }
}
searchStudent();

Answer 1

That's because the browser won't redraw the page while it is still computing some js. What you could do is replace your while(true) by a recursive call in a setTimeout:

function searchStudent(){

  search =promptUser();

  for(let i = 0; i<students.length; i++){

    if(search.toLowerCase() === students[i].name.toLowerCase())
    {
      let student = students[i];
      message = `<h4>Student: ${student.name}</h4>`; 
      message += `<p> Track: ${student.track} 
                  <br> Achievements:${student.achievements}
                  <br> Points: ${student.points}
                  </p>`; 
      printToScreen(message);
    }

    else if( search ===null || search.toLowerCase() === 'quit'){
      message = `<p>Thanks.Goodbye! </p>`;

      printToScreen(message);
      break;
    }   
    else{
         message = `<p> Student ${search} does not exist. Try Again!</p>`;
         printToScreen(message);
    }      
  }

  setTimeout(function(){
      searchStudent();
  },5);
}
searchStudent();