Please help me understand how my code works.

const main = document.querySelector('main');
const randomNumber = getRandomNumber(10);
let guess = prompt('I\'m thinking of a number between 1 and 10. Guess the number!');
let attempts = 1;

console.log(`The random number is ${randomNumber}`);    // Just to help understand how the code works
console.log(`The number of attempts is ${attempts}`);   // Just to help understand how the code works

// Keep track of the number of guess attempts

function getRandomNumber(upper) {
  return Math.floor( Math.random() * upper ) + 1;
}


// TODO: Use a loop to create a number guessing game
//  1) Ask the user to enter a number and assign that value to the `guess` variable
//  2) End the loop when the user's guess matches the random number
//  3) Display a message letting the user know they guessed the number

while(attempts < 10){
  if(+guess === randomNumber){
    document.querySelector('main').innerHTML = `<h1>It took you ${attempts} tries to guess the number ${randomNumber}!</h1>`;
    break;
  } else {
    // WHY DOES THIS NOT EXECUTE IMMEDIATLY AFTER THE IF EVALUATES TO FALSE?
    document.querySelector('main').innerHTML = `<h1>Too bad! You did not guess the number ${randomNumber}!</h1>`;
  }
  guess = prompt(`Try again!`);
  attempts++;
  console.log(`The number of attempts is ${attempts}`);  // Just to help understand how the code works
}