Transferring data from JavaScript to an HTML page

Question

Transferring data from JavaScript to an HTML page

I'm currently developing a rock, paper, scissors game using HTML and JS.

Here is the link to the complete code (CSS, JS, HTML): http://jsfiddle.net/fJw4R/. You can also view the game with images here:

The functionality of the .math-module is working well, with the computer randomizing its choice when the player selects rock, paper, or scissors.

Now, I want to display a text string underneath the computer screen indicating whether the player wins or loses. I've started working on a function that looks like this:

function theWinnerIs(userChoice, computerChoice) {
    // code to determine winner
}

How can I easily display the result from this function in the index file? For example, showing 'YOU WIN!' or 'YOU LOSE!'.

Any help on this would be greatly appreciated. Thank you.

javascript html css

Answer 1

Answer №1

A more concise approach is available instead of using a block of if statements:

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

This method will output -1 if the user loses the round, 1 if they win, and 0 in the case of a draw.

You can easily display the output in any desired container by updating 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];

Check out a brief demonstration to see these concepts in action.

Answer 2

A more concise approach is available instead of using a block of if statements:

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

This method will output -1 if the user loses the round, 1 if they win, and 0 in the case of a draw.

You can easily display the output in any desired container by updating 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];

Check out a brief demonstration to see these concepts in action.

Answer 3

Answer №2

It seems like you're looking to dynamically display text based on the output of your "theWinnerIs" method. One suggestion is to create a div element on your webpage and use JavaScript to update its content. There are multiple approaches you can take to achieve this.

To add a div to your page, you can include something like

<div id="output"></div>

. Then, you can update the text within this div using the following code:

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

For a different perspective, you can view an updated version of your code. Keep in mind that raina77ow's solution may be more elegant.

Answer 4

It seems like you're looking to dynamically display text based on the output of your "theWinnerIs" method. One suggestion is to create a div element on your webpage and use JavaScript to update its content. There are multiple approaches you can take to achieve this.

To add a div to your page, you can include something like

<div id="output"></div>

. Then, you can update the text within this div using the following code:

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

For a different perspective, you can view an updated version of your code. Keep in mind that raina77ow's solution may be more elegant.

Transferring data from JavaScript to an HTML page

Answer №1

Answer №2

Similar questions

What is the best way to determine the total number of rows that include a specific value?

Is there a way to eliminate the bottom border on the active navigation tab?

How can we eliminate duplicate arrays of objects within a multi-dimensional array using ReactJS and JavaScript?

Error encountered during Bootstrap 4 SCSS compilation: Invalid US-ASCII character identified as "xE2"

Breaking the layout using recursive components in VueJS

Step-by-step guide on creating a draggable navigation bar:

Add a unique identifier to a table row in a jQuery/AJAX function without the need for a looping structure

Group records in MongoDB by either (id1, id2) or (id2, id1)

Issue with mouseout gap in Microsoft Edge when using the <select> element

TS2345: The argument provided, which is of type 'Event', cannot be assigned to the parameter expected, which is of type 'HtmlInputEvent'

Enhanced customization of material-ui styles

Can someone provide guidance on utilizing parentheses in HTML code?

Customizing the width of an <input> element in HTML/CSS

Storing user authentication tokens securely in session storage within Next.js can help maintain a

Setting a variable in Angular after a successful AJAX call

What is the process by which Node can access predefined variables in clustering?

Utilize Set.Attribute prior to entering the for loop

Navigating to a different page in the app following a document update: a step-by-step guide

The selected image should change its border color, while clicking on another image within the same div should deselect the previous image

Applying a Webkit Scroll Bar to a specific element on the webpage