如何在 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行它會將文本元素/節點附加到正文的末尾。

這樣就不會從文檔中刪除任何內容。