Why is this only giving me the computer's output?

Question

<html>
<head></head>
<body><center><div id="output" style="width:500px; height:500px; background-color:blue;"></div></center></body>
<script>
var printOut = function(text) {
    var output = document.getElementById("output");
    output.innerHTML = text;
};
var userChoice = prompt("Do you choose Rock, Paper, or Scissors?")
console.log(printOut("You chose " + userChoice + "."));
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "Rock";
} else if (computerChoice <= 0.67) {
    computerChoice = "Paper";
} else {
    computerChoice = "Scissors";
}
console.log(printOut("The computer chooses " + computerChoice + "."));
var compareChoice = function(userChoice, computerChoice) {
    if (userChoice === computerChoice) {
        return "The result is a tie!";
    }
    if (userChoice === "Rock") {
        if (computerChoice === "Scissors") {
            return "Rock smashes Scissors!";
        } else {
            return "Paper covers Rock!";
        }
    }
    if (userChoice === "Paper") {
        if (computerChoice === "Rock") {
            return "Paper covers Rock!";
        } else {
            return "Scissors cut Paper!"
        }
    }
    if (userChoice === "Scissors") {
        if (computerChoice === "Paper") {
            return "Scissors cut Paper!";
        } else {
            return "Rock smashes Scissors!";
        }
    }
    return console.log(printOut(compareChoice(userChoice, computerChoice)));
};
</script>
</html>

When I open this in the browser and type in my choice, It only tells me the computer's choice when it should tell mine, the computer's and the end result. I think it has something to do with my tag, but I'm not sure.

Here's a fun variation... Paper Rock Lizard Spock: http://jsfiddle.net/h3TcP/4/. From http://stackoverflow.com/questions/22623331/rock-paper-scissors-lizard-spock-in-javascript/ — Jon P, Aug 20 '14 at 01:23

score 1 · Accepted Answer · answered Aug 20 '14 at 01:11

Actually, your choice was also printed in the output area. It just gets replaced by the computer's choice. Try modifying your printOut method to be like this:

var printOut = function(text) {
  var output = document.getElementById("output");
  output.innerHTML += text;
};

Why is this only giving me the computer's output?

1 Answers1