Question

我刚刚开始学习javascript，并在codeacademy上练习制作基于文本的石头剪刀游戏。我想在调试控制台之外向某人展示，但我无法弄清楚如何在html页面中显示它。

我的html文件中的代码是：

<HTML>

    <HEAD>
        <script src="rockpaperscissors.js"></script>
    </HEAD>

    <BODY>Choose rock, paper or scissors and write your choice in the text box
        <p>
             <A HREF="javascript:processOrder();">Click here to begin</A>
    </p>
    ...
    </BODY>
</HTML>

我的JS中的代码是：

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();

if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if (computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}

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

compare(userChoice, computerChoice);

我得到选择岩纸或剪刀的提示，但之后没有返回任何东西。我没有看到html中的计算机选择，我不知道用什么来显示它。

Answer 1

一种简单的方法是在html中放置一个带有id的元素：

<div id="ret"></div>

然后，您可以将javascript的最后一行更改为：

document.getElementById("ret").innerHTML=compare(userChoice,computerChoice);

这会将结果放在div。

之内

或者你可以这样做：

document.write(compare(userChoice,computerChoice));

将把结果写在您放置脚本标记的位置。

Answer 2

您需要一个地方来显示返回的结果。

将JS的最后一行更改为

alert(compare(userChoice,computerChoice));

Answer 3

很好地完成了RPS练习。请查看this JSFiddle，了解显示用户/计算机选择和结果的实现。

您会注意到一些关键变化。首先，您不应该链接到href中的javascript函数：

<A HREF="javascript:processOrder();">Click here to begin</A>

查看this great SO answer，了解各种可以改进的方法。在我的示例实现中，我使用jQuery库在Click here to begin提示符上创建了一个click事件处理程序，如下所示：

$('#begin').click(function() {playRPS(); return false;});

其次，您会注意到新的playRPS功能。这使用户可以决定何时玩游戏，并多次播放。

使用上面列出的原始代码，当加载Javascript代码时，浏览器会立即执行一些，然后再也不会：

它会启动用户输入值的提示。一旦用户输入他们的选择：
- 为computerChoice选择一个随机值，并将其转换为适当的摇滚/纸/剪刀字符串值。
- 执行compare（）函数。

它甚至不会等待用户点击您的Click here to begin链接！看看以下函数：

var playRPS = function() {
    var userChoice = prompt("Do you choose rock, paper or scissors?");
    var compChoice = computerChoice();
    var result = compare(userChoice,compChoice);
    $('body').append('<p>You chose ' + userChoice + '</p>')
               .append('<p>The computer chose ' + compChoice + '</p>')
               .append('<p>' + result + '</p>');
};

它简短而甜蜜。调用时（请记住，只要点击<a id="begin">链接就可以调用它，就像使用jQuery设置的那样），它可以完成一轮RPS所需的一切：

它询问用户他们想要选择什么。
它运行computerChoice函数，生成一个新的随机数并将该数字转换为字符串。
它会运行您的compare功能
它在compare元素结尾之前的<p>标记中添加了用户的选择，计算机的选择以及<body>函数返回的结果。

现在有许多方法可以进一步改进 - 结果可以更漂亮的方式显示。应该检查用户的输入以查看它是否是有效的答案（例如，如果我在框中输入“fire”会发生什么？或者“Paper”？），但这是一个很好的开始！

如何在html页面中显示返回的值

3 个答案: