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

我刚开始学习javascript，并在codeacademy上进行了一项练习，以制作文本基础摇滚纸剪刀游戏。我想将它展示给调试控制台之外的某个人，但我无法弄清楚如何在html页面中显示它。如何在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中看到计算机的选择，我不知道用什么来显示它。

来源

2013-07-18 Cherry

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

一个简单的方法是把一个元素在HTML中id：

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

然后你可以改变你的JavaScript的最后一行：

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

，将放在结果里面的那个div。

或者你可以只是做：

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

这将写，你把你的脚本标签的结果。

来源

2013-07-18 14:40:25 ejk314

我在哪里把这个在我的HTML文件？ – Cherry

你想要在身体中的任何地方。 – ejk314

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

JS你最后一行更改为

alert(compare(userChoice,computerChoice));

来源

2013-07-18 14:45:18 seriousdk

尼斯岗位上工作了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功能
它增加了用户的选择，电脑的选择，只是<body>元素结束前由<p>标签compare函数返回的结果。

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

来源

2013-07-18 15:29:21 uptownnickbrown

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

回答

相关问题