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

【问题标题】：How to display a returned value in an html page如何在 html 页面中显示返回值
【发布时间】：2013-07-18 14:34:53
【问题描述】：

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

【问题讨论】：

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

标签： javascript html

【解决方案1】：

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

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

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

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

这会将结果放入 div 中。

或者你可以这样做：

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

这会将结果写入您放置脚本标签的位置。

【讨论】：

我应该把它放在我的 html 文档的什么地方？
身体任何部位。

【解决方案2】：

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

将你的最后一行 JS 更改为

alert(compare(userChoice,computerChoice));

【讨论】：

【解决方案3】：

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

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

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

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

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

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

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

它启动提示用户输入值。一旦用户输入他们的选择：
- 它为computerChoice 选择一个随机值并将其转换为适当的rock/paper/scissors 字符串值。
- 它执行 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 函数
它将用户的选择、计算机的选择以及<p> 标记中compare 函数返回的结果添加到<body> 元素末尾之前。

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

【讨论】：