functions not running in the right order

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();

You never `break` out of the *while*-loop, you only `break` out of the *for*-loop. Thus you've created an endless loop. [What's the best way to break from nested loops in JavaScript?](https://stackoverflow.com/q/183161/3982562) — 3limin4t0r, Jun 04 '20 at 15:42

score 1 · Answer 1 · answered Jun 04 '20 at 15:25

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();

where can I read up more on this JavaScript behavior so I know to use it in the future? — user8964654, Jul 27 '20 at 22:25
https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda <-- This link redirects to a series of articles on how the js works. This is the #11, but you have links to the 10 previous articles in the introduction. I didn't read all of them, but they're clearly very interesting if you want to learn more. For your question related to js being single-threaded, the first article can give you useful indications: https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf — Ben, Jul 27 '20 at 23:13

functions not running in the right order

1 Answers1