如何在HTML页面中显示返回值

Question

如何在HTML页面中显示返回值

3

我刚开始学习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中没有看到计算机的选择，并且不知道该使用什么来显示它。

- Cherry

请注意，函数compare并不总是返回结果，这并不是一件好事。如果用户在被要求选择时按下取消按钮，则userChoice将为null，函数将不会返回任何值。 - Vadim Belyaev

3个回答

1

你需要一个显示返回结果的位置。

将你的JS最后一行改为：

alert(compare(userChoice,computerChoice));

- seriousdk

1

很棒，你成功完成了RPS练习。请查看this JSFiddle以查看一个实现，显示用户/计算机的选择和结果。

你会注意到一些关键变化。首先，您不应在href中链接到javascript函数：点击这里开始请参阅this great SO answer以了解多种改进该做法的方法。在我的示例实现中，我使用jQuery库在“点击此处开始”提示上创建了一个单击事件处理程序，如下所示： $('#begin').click(function() {playRPS(); return false;});

其次，您将注意到新的playRPS函数。这使用户可以决定何时玩游戏，并多次玩游戏。

原始代码如上所示，当JavaScript代码被加载时，浏览器会立即执行一些操作，然后永远不再执行：

它启动提示用户输入值的对话框。一旦用户输入他们的选择：

它为computerChoice选择一个随机值，并将其转换为适当的rock/paper/scissors字符串值。
它执行compare()函数。

它甚至不等待用户单击您的点击此处开始链接！相反，请查看以下函数：

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>');
};

这段代码简单明了。当被调用时（请记住，它在任何时候都会被调用，只要通过jQuery设置点击链接<a id="begin">），它会完成Rock-Paper-Scissors游戏的所有必要步骤：

询问用户想选择什么。
运行computerChoice函数，生成一个新的随机数并将其转换为字符串。
运行你的compare函数。
将用户的选择、计算机的选择以及compare函数返回的结果添加到<body>元素结束之前的<p>标签中。

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

- uptownnickbrown

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ejk314 · Accepted Answer

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

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

您可以将 JavaScript 的最后一行更改为：

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

那么结果将会被放置在该

标签内。

或者您可以直接这样做：

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

该脚本将会在你放置脚本标签的地方输出结果。