从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';
    }

}

将返回值发送到索引文件的最简单方法是什么？ 即。 你赢了！ 还是你输了！

谢谢你的帮助。

Answer 1

无需使用if块-这是一个非常紧凑的选择：

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];

这是一个小示例，用来说明这两个概念。

Answer 2

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

因此，您想将div添加到页面中，例如<div id="output"></div> 。 然后，您可以使用以下内容在此处更新文本

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

这是透视图代码的更新版本 ，尽管raina77ow的解决方案更好。