How to hold a function from finishing until the user clicks a button or until a variable is set

Let me explain since that probably doesn’t make much sense.

I got this snake game where the user can select the difficulty of the game. All of the difficulties are done as buttons but I also added this extra button as a custom difficulty.

Now when the normal difficulties are clicked, it’s supposed to go to another module and then based on the button clicked, get the speed for that chosen difficulty and return it and then after that the game with the snake speed starts.

But when the custom button is clicked, another section is supposed to show up. This section has an input to ask for the speed and also a button to click when you chose the speed.

Well I added an event listener that when that button is clicked, it returns the speed of the snake from the input but the problem is that by the time the button get clicked, the function is already done and it pretty much returns undefined. So the speed is undefined and the game kinda ‘crashes’.

let custom_page = document.querySelector('#custom_inputs');
let speed_input_holder = document.querySelector('#custom_speed');
let is_clicked = false;
let temp_number = 0;

custom_btn.addEventListener('click', () => {
    is_clicked = true;
    temp_number = speed_input_holder.value;
})


for(let btn of button_parent.children){
    btn.addEventListener('click', (event) => {
        snake_speed = startGame(event.target);
        setTimeout(() => {
                 window.requestAnimationFrame(main); // starts game
        }, 1100);
    })
}

function startGame(btn){
   if(btn.className != '5'){ //btns have classes. 5 is custom, rest are basic
        speed = setUpSpeed(btn); // returns speed as a number
        return speed;
    } else {
        function isDone(){
            while(!is_clicked){
                 isDone();
            }
            is_clicked= false;
            return temp_number; // this is the speed 
        }
        isDone();
    }
}

I tried to simplify the code from how it actually is.
I tried to add something to check whether the button has been clicked. If it has, get the speed that I saved inside a variable and if it hasn’t, then simply run the function again. Basically a loop, but this kinda returns an error because of making so many calls.

let val = false;
function isDone(){
      while(!val){
           isDone();
      }
      showGame(custom_page);
      speed = valueHolder.value;
}
isDone();

I tried to fix this with an async function, but doing something like
snake_speed = await getSpeed(class) doesn’t really do much because await doesn’t seem to work on these “normal” functions and snake_speed just becomes undefined again. I’m not really familiar with promises and async/await so I just tried to wing it here, but it didn’t work.

async function info(){
     let spd = await startGame(event.target);
     spd.then(function(snake_speed){
          setTimeout(() => {
              window.requestAnimationFrame(main); // starts game
          }, 1100);
     })
  }
  info();

Can you give me any ideas?