JavaScript Rock, Paper, Scissors game logic

Question

I am having some difficulty thinking through and implementing a JavaScript Rock, Paper, Scissors game. My problem is when I want to retrieve the data from the UI with an event listener, I am unable to stop the game until I have retrieved that data before it continues into the if-else statement.

Any criticism or feedback of any kind is certainly welcome.

Here is my code:

 //1. GETTING DATA FROM THE UI AND THE COMPUTER
let model = (function() {
    
    // dom strings:
    const domStrings = {
        userInput: "#textInput",
        submit: "#submit"
    }
        return {

            // A. Get user input
            getUserInput: function(){

                return document.querySelector(domStrings.userInput).value;
               
            },

            // B. Get computer input
            compInput: function() {
                let optionsArray = ["rock", "paper", "scissors"];
                let randNum = Math.floor(Math.random()* 3);
                console.log(randNum)
                return optionsArray[randNum];
            },

            // C. Make DOM elements public
            getDomStrings: function(){
                return domStrings;
            }
        }
})();

// 2. USER INTERFACE CONTROLLER
let UI = (function(){
    
    return {
        insertHTML: function(outcome, playerScore, computerScore){
            return `
                <div class="text">
                    <p>${outcome}!</p>
                    <p>***********</p>
                    <p>Total scores: Player ${playerScore} - ${computerScore} Computer</p>
                </div>
            `
        }
    }
})()

// 3. APP CONTROLLER
let controller = (function(mdl, ui){
    // (imported domStrings from model):
    let DOM = mdl.getDomStrings();
    let userInput = "scissors";
    

    // a. Get user Input

        document.querySelector(DOM.submit).addEventListener("click", (e) => {
            e.preventDefault();
            userInput = mdl.getUserInput();

        });
    
       
    // b. get computer Input
        let compInput = mdl.compInput();
        
    // c. check whether the player wins, the computer wins or if its a draw
   
            if(userInput === compInput){
                console.log("Draw!")
            } else if(userInput === "rock" && compInput === "paper"){
                console.log("Computer Wins!");
            } else if(userInput === "rock" && compInput === "scissors"){
                console.log("player wins");
            } else if(userInput === "paper" && compInput === "scissors"){
                console.log("computer wins")
            } else if (userInput === "paper" && compInput === "rock"){
                console.log("user wins");
            } else if (userInput === "scissors" && compInput === "rock"){
                console.log("player wins");
            } else if (userInput === "rock" && compInput === "paper"){
                console.log("computer wins");
            } else if (userInput === "scissors" && compInput === "paper"){
                console.log("computer wins");
            }
        
        // i. update score

        // ii. display current score
})(model, UI)

Answer 1

You need to place your if statements inside the event listener. For example:

let controller = (function(mdl, ui){
    // (imported domStrings from model):
    let DOM = mdl.getDomStrings();
    let userInput = "scissors";


    // a. Get user Input

        document.querySelector(DOM.submit).addEventListener("click", (e) => {
            e.preventDefault();
            userInput = mdl.getUserInput();
            getResult();
        });


    // b. get computer Input
        let compInput = mdl.compInput();

    // c. check whether the player wins, the computer wins or if its a draw
        function getResult() {
            if(userInput === compInput){
                console.log("Draw!")
            } else if(userInput === "rock" && compInput === "paper"){
                console.log("Computer Wins!");
            } else if(userInput === "rock" && compInput === "scissors"){
                console.log("player wins");
            } else if(userInput === "paper" && compInput === "scissors"){
                console.log("computer wins")
            } else if (userInput === "paper" && compInput === "rock"){
                console.log("user wins");
            } else if (userInput === "scissors" && compInput === "rock"){
                console.log("player wins");
            } else if (userInput === "rock" && compInput === "paper"){
                console.log("computer wins");
            } else if (userInput === "scissors" && compInput === "paper"){
                console.log("computer wins");
            }
        }
        // i. update score

        // ii. display current score
})(model, UI)