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

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

javascript html

Javascript 如何在html页面中显示返回值,javascript,html,Javascript,Html,我刚开始学习javascript，然后在codeacademy上做了一个基于文本的石头剪刀游戏。我想在调试控制台之外向其他人展示它，但我不知道如何在html页面中显示它我的html文件中的代码是： <HTML> <HEAD> <script src="rockpaperscissors.js"></script> </HEAD> <BODY>Choose rock, paper

我刚开始学习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);

var userChoice=prompt（“您选择石头、布还是剪刀？”）；
var computerChoice=Math.random（）；
如果（计算机选择<0.34）{
computerChoice=“rock”；
}else if（computerChoice一种简单的方法是在html中放置一个id为id
的元素：
<div id="ret"></div>

这将把结果放在div
中
或者你可以这样做：
document.write(compare(userChoice,computerChoice));

它将把结果写入脚本标记所在的位置。
您需要一个位置来显示返回的结果
将JS的最后一行更改为
alert(compare(userChoice,computerChoice));

完成RPS练习做得很好。请看一个显示用户/计算机选择和结果的实现
您会注意到一些关键更改。首先，您不应该链接到href中的javascript函数：

看看有哪些方法可以改进这种做法。在我的示例实现中，我使用jQuery库在单击此处开始提示符上创建一个单击事件处理程序，如下所示：
$（“#开始”）。单击（函数（）{playRPS（）；返回false；}）

其次，您会注意到新的playRPS
功能。这使用户可以决定何时玩游戏，并多次玩游戏
对于上面列出的原始代码，当加载Javascript代码时，浏览器会立即执行一些操作，然后再也不会执行这些操作：

它会启动提示，提示用户输入值。用户输入选择后：

它为computerChoice选择一个随机值，并将其转换为适当的rock/paper/Scissor字符串值
它执行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>');
};

var playRPS=function（）{
var userChoice=prompt（“您选择石头、布还是剪刀？”）；
var compChoice=computerChoice（）；
var结果=比较（userChoice，compChoice）；
$（'body'）.append（“您选择了“+userChoice+””）
.append（“计算机选择了“+compChoice+””）
.append（“”+结果+”）；
};

它又短又甜。当被调用时（请记住，只要点击
链接，它就会被调用，就像jQuery设置的那样），它会完成一轮RPS所需的所有操作：

它询问用户想要选择什么
它运行computerChoice
函数，生成一个新的随机数并将该数转换为字符串
它运行compare
功能
它将用户的选择、计算机的选择以及
标记中的比较功能返回的结果添加到
元素末尾之前


现在有很多方法可以进一步改进——结果可以以更漂亮的方式显示。可能应该检查用户的输入，看看它是否是有效答案（例如，如果我在框中输入“火”或“纸”，会发生什么情况？），但这是一个很好的开始！
请注意，compare
函数并不总是返回结果，这不是一件好事。如果用户在被要求选择时按Cancel键，userChoice
将为null且函数不会返回值。我应该将其放在我的html文档中的什么位置？您可以选择的任何位置在身体里有一种新的感觉。
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>');
};