I'm trying to get an HTML element's id and process it with a function called process input whenever that element is clicked instead of having the user enter the id themselves.

// this function doesn't execute until I get the user to define the user input variable, which works fine. 
function getUserInputUsingPrompt() {
    let userInput = prompt('Please, enter either rock, paper or scissors');
    
    processInput(userInput); //Works :)
}
// but in this function, the code doesn't stop excuting until a click event is fired :(
function getUserInputUsingClickEvent() {
    let userInput = ''
    let buttons = document.querySelectorAll('img');
    buttons.forEach(button => {
        button.addEventListener('click', e => userInput = e.target.id)
    })
    processInput(userInput); // Doesn't work :(
}

function processInput(input) {
    //do some work with input.
}

I am trying to make the function with the click event stop executing until I get a click event which will define the userInput variable.