My Rock, Paper, Scissors Game Won't Repeat Properly - Any Ideas?

Question

Edit: I started a JSfiddle account: https://jsfiddle.net/mcgettrm/7huL5bdt/ but that doesn't seem to demonstrate the problem as the first buttons aren't clickable. :S

I've got the JavaScript shown below which is just a rock, paper, scissors game that allows the player to play against the computer on my website and then asks if the user would like to play again. The code works fine, it tells me correctly who won and then asks if the user would like to play again. Later I want it to tally and display the wins and losses, but not until I have resolved the following problems.

Here are the problems:

1. In the case of a draw, it tells the user the result was a draw, but the button that should have changed to "How about another round?" doesn't appear - it just stays as "Who won?" but curiously - after all the other results, this functionality works fine (I can't see any difference in the code).

2. In the other cases where the functionality is good for the above point (e.g. "Computer Won" or "User Won!") when the user then clicks on the "how about another round?" button - it takes the user back to the correct point where the options are now "Rock", "Paper", and "Scissors" again (all displaying correctly as buttons) but when the user clicks on one of them, nothing happens.

I've only been coding JavaScript of a couple of days and as you can imagine, this is my first project so I'm completely at a loss. Any insight would be great.

code:

<script>

    var resolve = function(){
        if(computerChoice === userChoice){
            document.getElementById("rpstext").innerHTML = "It was a draw!"; 
            draw ++;
            document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";

        }
        else if(computerChoice === "rock"){
            if (userChoice == "paper"){
                document.getElementById("rpstext").innerHTML = "You won!";
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
            }
            else {
                document.getElementById("rpstext").innerHTML = "Computer won!";
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
                }
            }
        else if(computerChoice === "paper"){
            if(userChoice === "scissors"){
                document.getElementById("rpstext").innerHTML = "You won!";
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
                }
            else{
                document.getElementById("rpstext").innerHTML = "The computer won!";
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";

                }
        }

        else if(computerChoice === "scissors"){
            if(userChoice === "rock"){
                document.getElementById("rpstext").innerHTML = "You won!"; 
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
                }
            else {
                document.getElementById("rpstext").innerHTML = "The computer won!"; 
                document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='yesPlease()'> How about another round? </button>";
            }

        }
    }

    var computerChoice = function(){
        var roll = Math.random();
        if(roll <= 0.33){
        document.getElementById("rpstext").innerHTML = "Computer chooses rock!"; 
        computerChoice = "rock";
        document.getElementById("options").innerHTML = " <button class='rpsbutton' type='button' onclick='resolve()'> Who won? </button>";
        }
        else if((roll > 0.33)&&(roll < 0.67)){
        document.getElementById("rpstext").innerHTML = "Computer chooses paper!"; 
        computerChoice = "paper";
        document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='resolve(computerChoice,userChoice)'> Who won? </button>";
        }
        else {
            document.getElementById("rpstext").innerHTML = "Computer chooses scissors!"; 
            computerChoice = "scissors";
            document.getElementById("options").innerHTML = " <button class='rpsbutton' type='button' onclick='resolve()'> Who won? </button>";
            }
    }
    var rock = function(){
        userChoice = "rock";
        computerChoice();
    }
    var paper = function(){
        userChoice = "paper";
        computerChoice();
    }
    var scissors = function(){
        userChoice = "scissors";
        computerChoice();
    }


    var noThanks = function(){
        document.getElementById("rpstext").innerHTML = "Well you suck. Maybe you should go over to the 'essays' part of this site and hang out with all the boring people so that the rest of us can have a good time.";
        document.getElementById("options").innerHTML = "";
    }
    var yesPlease = function(){
        document.getElementById("rpstext").innerHTML = "Great! Which do you choose: Rock, Paper, or Scissors?";
        document.getElementById("options").innerHTML = "<button class='rpsbutton' type='button' onclick='rock()'>ROCK!</button> <button class='rpsbutton' type='button' onclick='paper()'>PAPER!</button> <button  class='rpsbutton' type='button' onclick='scissors()'>SCISSORS!</button>";
    }

    </script>

Couple of side questions:

3. Is it possible to concatenate using .innerHTML in order to display both a string AND a variable value? If not, how does one do so? I can't seem to find much online (I may not be searching with the right terminology).

4. I was worried this code wouldn't work because I thought that values inside functions would be local and that global values for the user choice and the computer choice would be needed to resolve the "resolve" function that compares them and sees who won. However, in this regard at least, the code seems to function. Not really sure what my questions is here, but any observations/insight that might help me understand the use of global and local variables in this context would be great.

Answer 1

You are using the name computerChoice both as a function and a variable. When you set the variable to the choice, you end up overwriting the function, and that's why you can't call it anymore. The simplest way to fix it is just by changing the name of the function to something like getComputerChoice (and consequently updating the rock(), paper(), and scissors() functions as well). You could also, instead of abusing globals, refactor your functions to return values instead.

The first method is available for testing as a fiddle here.

As for why it won't work if it's a draw, you're trying to increment a nonexistent variable draw which is throwing an error and stopping your code.