Sending a string/result from JS to HTML-page

Question

I'm working on a simple rock, paper, scissors game of HTML + JS.

Here are the full codes (CSS, JS, HTML): http://jsfiddle.net/fJw4R/ (too long to past here I thought). Here you can see it with pictures: http://shinebrightmedia.se/rps/rockpaperscissors.html

As you can see, the .math-module works, and when you choose rock, paper or scissor the computer randomizes a choice.

However, I now would like to have a textstring underneath the computer/monitor, and I'm wondering what the easiest way to do that. I want it to either say YOU WIN! or YOU LOSE!

I started on a function looking like this:

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

}

What is the easiest way to send the return to the index-file? ie. YOU WIN! or YOU LOSE!

Thanks for any help.

raina77ow · Accepted Answer · 2014-04-16 14:48:31Z

2

No need to use this block of ifs - here's very compact alternative:

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

... which will give you -1 if user loses the round, 1 if they win, 0 in case of draw.

Now you can just send the output to any prepared container by filling its innerHTML property:

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

Here's a small demo to illustrate both those concepts.

edited Apr 16, 2014 at 14:48

answered Apr 16, 2014 at 14:22

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dolcens Over a year ago

Hi! Thanks alot for your help, that code snippet looks really neat! I tried applying it, but the game stops working afterwards. I tried to implement this in the .html file: <p id="result"></p> inside a div. Is this wrong?

raina77ow Over a year ago

'but the game stops working afterwards' - what's the console output?

Dolcens Over a year ago

It just stops working, nothing happens when I press any icon. With console output do you mean running the code on JSlint?

raina77ow Over a year ago

JSLint certainly won't hurt, but I actually meant the browser's console (usually opened when you press F12).

Ninjakannon · Accepted Answer · 2014-04-16 14:56:01Z

0

From what I understand, you would like to display some text depending on the outcome of your "theWinnerIs" method. I would suggest you create a div on your page and set its content with JavaScript. There are numerous ways to accomplish your goal, however.

So you want to add a div to your page, something like <div id="output"></div>. You can then update the text here with the following

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

Here's an updated version of your code for perspective, though raina77ow's solution is much nicer.

edited Apr 16, 2014 at 14:56

answered Apr 16, 2014 at 14:24

Ninjakannon

3,8297 gold badges55 silver badges82 bronze badges

Collectives™ on Stack Overflow

Sending a string/result from JS to HTML-page

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related