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

How to display a returned value in an html page

本文关键字：显示 返回值 html      更新时间：2023-09-26

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

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

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

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

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

这将把结果放入div中。

或者你可以做：

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

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

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

将JS的最后一行更改为

alert(compare(userChoice,computerChoice));

RPS练习做得不错。看看这个JSFiddle，了解显示用户/计算机选择和结果的实现。

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

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

看看这个伟大的SO答案，你可以通过各种方法来改进这个练习。在我的示例实现中，我使用jQuery库在Click here to begin提示符上创建一个点击事件处理程序，如下所示：

$('#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"会发生什么？），但这是一个很好的开始！

相关文章：