如何在 Javascript 中显示文本？

Question

我有一些函数和一些变量。 我想在浏览器上以文本形式返回一个变量和函数结果。

我所做的是我用文本制作了一个 HTML 文件：

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

这是指这个javascript文件：

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))

但是，当我用浏览器打开它时，文本不显示，但提示显示。

不过，它在 Codecademy 中运行良好。

Answer 1

页面上没有显示任何内容是正常行为，因为您没有告诉浏览器这样做。

也许你想要这样的东西。

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

基本上，这个集合是要评估并删除当前正文中的任何内容的正文的 HTML，或者

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

将在第1行获取生成的值并保存它，在第2行将在文档上创建一个文本元素，在第3行它会将文本元素/节点附加到正文的末尾。

这样就不会从文档中删除任何内容。