I am trying to create a Javascript guessing game where the user has 10 tries to guess a number between 1-999. I have to use a validate the number, use a loop and show alerts if the user gets a match and also when they run out of guesses. Using the number 45 just for testing. Each guess should be numbered and displayed using innerHTML. Problem is, the counter is stuck at zero. Not sure what I'm missing! Code below:

```
function myFunction() {
  var userInput = document.getElementById("input").value;
  var randomNum = 45;
  // test for valid input number from 1 to 999
  if (userInput < 0 || userInput > 999) {
    alert("Your number must be from 1 to 999");
  } else {
    alert("Input OK");
  }
  var counter = 0;
  while (counter < 10) {
    counter++;
    if (userInput == randomNum) {
      alert("You win!");
    }
    if (userInput > randomNum) {
      document.getElementById("loopResults").innerHTML += counter + "." + " Your answer: " + userInput + "." + " Guess lower! < br / > ";
      alert("You have " + counter + " guesses left.");
    } else if (userInput < randomNum) {
      document.getElementById("loopResults").innerHTML += counter + "." + " Your answer: " + userInput + "." + "Guess higher! < br / > ";
      alert("You have " + counter + " guesses left.");
    }
    break;
  } // end while loop
} // end function myFunction()

```