将字符串/结果从 JS 发送到 HTML 页面

Question

我正在开发一个简单的 HTML + JS 的石头、纸、剪刀游戏。

以下是完整代码（CSS、JS、HTML）：http://jsfiddle.net/fJw4R/ （我想过去太久了）。这里有图可以看：http://shinebrightmedia.se/rps/rockpaperscissors.html

如您所见，.math 模块有效，当您选择石头、纸或剪刀时，计算机会随机选择一个选项。

但是，我现在想在计算机/显示器下面有一个文本字符串，我想知道最简单的方法是什么。我希望它要么说你赢了！否则你就输了！

我从一个看起来像这样的函数开始：

function theWinnerIs(userChoice, computerChoice) {

    if (userChoice === computerChoice ) {
        return 'No winner, it is a draw';
    }

    if ((userChoice === 'rock') && (computerChoice === 'scissor')) {
        return 'human';
    }
    if ((userChoice === 'rock') && (computerChoice === 'paper')) {
        return 'computer';
    }

    if ((userChoice === 'paper') && (computerChoice === 'scissor')) {
        return 'computer';
    }
    if ((userChoice === 'paper') && (computerChoice === 'rock')) {
        return 'human';
    }

    if ((userChoice === 'scissor') && (computerChoice === 'rock')) {
        return 'computer';
    }
    if ((userChoice === 'scissor') && (computerChoice === 'paper')) {
        return 'human';
    }

}

将返回发送到索引文件的最简单方法是什么？ IE。你赢了！否则你就输了！

感谢您的帮助。

Answer 1

据我了解，您希望根据“theWinnerIs”方法的结果显示一些文本。我建议您在页面上创建一个 div 并使用 JavaScript 设置其内容。但是，有很多方法可以实现您的目标。

所以你想给你的页面添加一个 div，比如<div id="output"></div>。然后，您可以使用以下内容更新此处的文本

var outputElement = document.getElementById("output");
outputElement.innerHTML = theWinnerIs(userChoice, computerChoice);

这是您的代码updated version 的透视图，不过raina77ow 的解决方案要好得多。

Answer 2

无需使用这块ifs - 这是非常紧凑的替代方案：

var choices = { rock: -1, paper: 0, scissors: 1 };
var score   = choices[userChoice] - choices[computerChoice];
score       = score - (score/2|0) * 3;

...如果用户输掉这一轮，它会给你-1，如果他们赢了，它会给你1，如果是平局，它会给你0。

现在您可以通过填充其 innerHTML 属性将输出发送到任何准备好的容器：

var results = {
  '-1': 'YOU LOSE',
   '1': 'YOU WIN',
   '0': 'IT\'S A DRAW'   
};
var resultContainer = document.getElementById('result');
resultContainer.innerHTML = results[score];

这里是a small demo 来说明这两个概念。