如何在 Javascript 中显示文本？

Question

I have some functions and some variables. I would like to return a variable and the function outcome as text on my browser.

What I have done is I have made a HTML file with the text:

<SCRIPT SRC="rockpaper.js">
</SCRIPT>

And this refers to this javascript file:

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "Computer chooses rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "Computer chooses paper";
} else {
    computerChoice = "Computer chooses scissors";
}

console.log(computerChoice);

var compare = function(choice1,choice2)
{
    if(choice1===choice2)
    {
        return("The result is a tie!");
    }

    if(choice1==="Computer chooses rock")
    {
        if(choice2==="scissors")
        {
            return("rock wins");
        }
            else
            {
                return("paper wins");
            }
    }
    if(choice1==="Computer chooses paper")
    {
        if(choice2==="rock")
            return("paper wins");
            else
            {
                return("scissors wins");
            }
    }
    if(choice1==="Computer chooses scissors")
    {
        if(choice2==="rock")
        {
        return("rock wins");
        }
        else
        {
            return("scissors wins");
        }
    }
}

console.log(compare(computerChoice,userChoice))

However, when I open it with a browser, the text doesn't display, but the prompt does.

It works fine in Codecademy, though.

Answer 1

Nothing being displayed on the page is normal behaviour seeing as you have not told the browser to do so.

Maybe you want something like this.

document.body.innerHTML = compare(computerChoice, userChoice);

Basically, this set's the HTML of the body to value and removes anything currently in the body, or

var generatedText = compare(computerChoice,userChoice), // 1
    myText = document.createTextNode( generatedText );  // 2
document.body.appendChild( myText );                    // 3

Will on line 1 get the generated value and save it, on line 2 will create a text element on the document and on line 3 it will append the text element/node to the end of the body.

This way nothing is removed from the document.