return <\/code>statement exits a function immediately and can optionally return a value to the function caller.<\/li>\n<\/ul>\n\n\n\nfunction handlePlayerChoice(event) {\n if (!event.target.classList.contains(\"emoji\")) return;<\/mark>\n\n}<\/code><\/pre>\n\n\n\n\nGet the text content of the clicked element (the emoji) and save it in the playerChoice <\/code>variable. <\/strong>We\u2019ll then change the innerHTML<\/code> of the playerChoiceContainer <\/code>to only display the emoji that was clicked. <\/li>\n<\/ul>\n\n\n\nfunction handlePlayerChoice(event) {\n if (!event.target.classList.contains(\"emoji\")) return;\n\n playerChoice = event.target.textContent;\n playerChoiceContainer.innerHTML = `<p class=\"emoji\">${playerChoice}<\/p>`;\n<\/mark>\n}<\/code><\/pre>\n\n\n\nStep 2 Output<\/strong><\/h3>\n\n\n\nStep 3: Show an emoji on the page for the computer’s choice<\/h2>\n\n\n\n We’ll create a function that will eventually shuffle the emojis on the page and display the computer’s choice. In this step, we’ll create the function and display a single emoji choice on the page.<\/p>\n\n\n\n
\nCreate a variable called computerChoice <\/code>that will hold the computer’s choice.<\/strong> We want to be able to access the variable in a few places so we’ll create it at the top of our file to ensure that it is global.<\/li>\n<\/ul>\n\n\n\nvar playerChoice = \"\";\nvar computerChoice = \"\";<\/mark><\/code><\/pre>\n\n\n\n\nCreate an array, a type of data that holds several items in a single variable, called emojis <\/code>that holds the Rock, Paper, and Scissors emoji characters. <\/strong>Note that the scissors emoji needs to have an additional space after the emoji, as the quote characters overlap the emoji if you don’t add a space on the right-hand side in most text editors. <\/li>\n<\/ul>\n\n\n\n
\nhttps:\/\/emojipedia.org\/rock\/\n\n\ud83e\udea8<\/li>\n<\/ul>\n<\/li>\n\n\n\n https:\/\/emojipedia.org\/page-facing-up\/\n\n\ud83d\udcc4<\/li>\n<\/ul>\n<\/li>\n\n\n\n https:\/\/emojipedia.org\/scissors\/\n\n\u2702\ufe0f<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\nvar playerChoice = \"\";\nvar computerChoice = \"\";\n\/*\n * Note that the scissors emoji has to have an extra space!\n *\/\nvar emojis = [\"\u2702\ufe0f \", \"\ud83d\udcc4\", \"\ud83e\udea8\"];<\/mark><\/code><\/pre>\n\n\n\n\nIn a variable called emojiShuffleElement<\/code>, use document.querySelector(<\/code>) to get a reference to the #emoji-shuffle<\/code> element.<\/strong><\/li>\n<\/ul>\n\n\n\nvar emojis = [\"\u2702\ufe0f \", \"\ud83d\udcc4\", \"\ud83e\udea8\"];\n\nvar playerChoiceContainer = document.querySelector(\"#player-choice-container\");\nvar emojiShuffleElement = document.querySelector(\"#emoji-shuffle\");<\/mark><\/code><\/pre>\n\n\n\n\nNext, create a function called shuffleEmojis()<\/code>. <\/strong>This will eventually shuffle through the computer\u2019s three emojis on a timer, but right now, it’ll simply pick whatever emoji we ask for from the emojis<\/code> array and display it on the page. (Don’t type the ...<\/code> characters. Those are an indicator that we’re leaving out code you don’t need to worry about right now.)<\/li>\n<\/ul>\n\n\n\nfunction handlePlayerChoice(event) {\n ...\n}\n\nfunction shuffleEmojis() {\n\n}<\/mark><\/code><\/pre>\n\n\n\n\nGet an item from the emojis<\/code> array and store it in the computerChoice<\/code> variable. <\/strong>We use the []<\/code> brackets to access array items at an index number. Array indices start at 0, so the first element is at index 0, the second at index 1, etc. Here, we select the second item, the Paper emoji.<\/li>\n<\/ul>\n\n\n\nfunction shuffleEmojis() {\n computerChoice = emojis[1];<\/mark>\n}<\/code><\/pre>\n\n\n\n\nGet the text inside of your emojiShuffleElement <\/code>variable<\/strong> by setting the textContent <\/code>of the emojiShuffleElement <\/code>to the computerChoice <\/code>(which represents the emoji text). If you don’t need to change the HTML of an element, the textContent <\/code>property is an easy way to display text on the screen. <\/li>\n<\/ul>\n\n\n\nfunction shuffleEmojis() {\n computerChoice = emojis[1];\n emojiShuffleElement.textContent = computerChoice;<\/mark>\n}<\/code><\/pre>\n\n\n\n\nNext, call the shuffleEmojis()<\/code> function<\/strong>. You should now see your chosen emoji appear under the “Computer’s Choice” text. Try changing the index number to a different emoji’s index in shuffleEmojis()<\/code> to see if the emoji on the page changes! Note that you’ll need to refresh the page after each change in order to see the changes take effect. <\/li>\n<\/ul>\n\n\n\nplayerChoiceContainer.addEventListener(\"click\", handlePlayerChoice);\n\nshuffleEmojis();<\/mark>\n\nfunction handlePlayerChoice(event) {\n ...\n}<\/code><\/pre>\n\n\n\nStep 3 Output<\/strong><\/h3>\n\n\n\nStep 4: Shuffle the computer’s emoji choices<\/h2>\n\n\n\n We’ll create a shuffle animation that shuffles through the Rock, Paper, and Scissors emojis quickly. This makes it seem like the computer is thinking about what choice it will randomly select.<\/p>\n\n\n\n
\nCreate a variable called currentEmojiNumber<\/code><\/strong> that will hold the index number of the emoji we’re currently displaying on the page during the shuffling process. We’ll start with the first index in the emojis<\/code> array, index 0.<\/li>\n<\/ul>\n\n\n\nvar emojis = [\"\u2702\ufe0f \", \"\ud83d\udcc4\", \"\ud83e\udea8\"];\nvar currentEmojiNumber = 0;<\/mark><\/code><\/pre>\n\n\n\n\nIn the shuffleEmojis()<\/code> function, use the currentEmojiNumber <\/code>to pick an emoji out of the emojis <\/code>array. <\/strong><\/li>\n<\/ul>\n\n\n\nfunction shuffleEmojis() {\n computerChoice = emojis[currentEmojiNumber<\/mark>];\n emojiShuffleElement.textContent = computerChoice;\n}<\/code><\/pre>\n\n\n\n\nWe need to increase the currentEmojiNumber<\/code> if we’re not on the last index of the emojis<\/code> array and set it to 0 otherwise. <\/strong>We’ll use an if...else<\/code> conditional statement to do this. Note that the emojis <\/code>array has a length <\/code>property that we can use to find out how big it is and that the last index number is 1 less than the length of the array. Also, note that we can increase the value stored in a variable using the ++<\/code> operator, as we do on the currentEmojiNumber<\/code> here.<\/li>\n<\/ul>\n\n\n\nfunction shuffleEmojis() {\n computerChoice = emojis[currentEmojiNumber];\n emojiShuffleElement.textContent = computerChoice;\n\n if (currentEmojiNumber < emojis.length - 1) {\n currentEmojiNumber++;\n } else {\n currentEmojiNumber = 0;\n }\n<\/mark>\n}<\/code><\/pre>\n\n\n\n\nRemove the call to shuffleEmojis()<\/code>. We’ll have JavaScript call this function in an interval timer instead.<\/strong><\/li>\n<\/ul>\n\n\n\nplayerChoiceContainer.addEventListener(\"click\", handlePlayerChoice);\n\nshuffleEmojis(); \/\/ REMOVE THIS!<\/s><\/mark>\n\nfunction<\/strong> handlePlayerChoice<\/strong>(event) {\n ...\n}<\/code><\/pre>\n\n\n\n\nUse the setInterval()<\/code> function to call the shuffleEmojis()<\/code> function every 150 milliseconds. <\/strong>The setInterval()<\/code> function is provided to us from the browser. It returns a reference to the ID of the running interval timer which we’ll store in a variable called shuffleIntervalID<\/code>. This ID can be used to stop the interval timer, which we’ll do in the next step. <\/li>\n<\/ul>\n\n\n\nvar currentEmojiNumber = 0;\n\nvar shuffleIntervalID = setInterval(shuffleEmojis, 150);<\/mark>\n\nvar playerChoiceContainer = document.querySelector(\"#player-choice-container\");<\/code><\/pre>\n\n\n\nStep 4 Output<\/strong><\/h3>\n\n\n\nStep 5: Pick a random emoji for the computer<\/h2>\n\n\n\n Now that the computer’s possible choices are shuffling between Rock, Paper, and Scissors, we need to actually pick a random choice for the computer after the player makes their choice.<\/p>\n\n\n\n
![\"Rock](\"https:\/\/lh4.googleusercontent.com\/6Yvbo3GliY-iWjU6oR6aaY7STs384v1K76-2njJCaEWfaZvov87Jf5ssRj8Z0hxlIN5wuB1frf3J_L-fa7RFgV7oNpgkCRWpENoi1UzXKV2v-8Ud7H2pxB5uzBhY84mq3zVZemIEcPXcSSO-DnFdW1ioTwMXqAMr1t_zICEkzNjF8eH0HQ98piBRVl0_5A\")
![\"rock](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/11\/rock-paper-scissors-html-css-1024x587.jpg\")
<\/a><\/figure><\/div>\n\n\n![\"rock](\"https:\/\/lh3.googleusercontent.com\/OlhLiJMsBQ3Wc9z4Lbaydl3gX_zY-dLZHjHz1t2-zicMDTjkpzkwxcY-mQUAjeB-Ik8p6xkNqzFdyk36sVL3QjLz7mguQF2KgWcZcHrwlAh80rb3Osx7UwMzAIO03_65dqNrnkJ5hvx1Q9zzaX8BwUfBuczmWgz2qVJU-cQ0WDPahnQ6wAGB8aKAwnH5Lw\")
<\/figure>\n\n\n\n![\"rock](\"https:\/\/lh3.googleusercontent.com\/g3FQmd04PJ1v1AGezS_h2wf2_EMRh2EgL4upLbkNz5a51CHABC8RmvM3KzGRXvkumBtOhYU3vg-ggab4IvoV2J3YnF5UnPi9tg3oeW1hCHicZkVypLQtEXSnHEfcZ8VTeNMmJiFQH06NnQLR7hTS3P6EIUfRphOfpt1aVHBzZdMHP1xeUJX_Q9HcRPzD0A\")
<\/figure>\n\n\n\n![\"rock](\"https:\/\/lh5.googleusercontent.com\/ERSDJXUObBCxz2KlG67u9N26_toXJJ_-OLUQAE1BJSAUXxix_dNZJcQ0I9JEJ5ORPDKDF4YNBgyOQBSMcyPbRPmwDSEvGdW8iTBQ_6kykTejfBUC3BlRcx6jTd3gwhVdlMj8rrOd95t4EqBYDrAG8bsBDvQqtjDVVQTgguaxqHN0Ux9oBm1gBPHWs8pTCQ\")
<\/figure>\n\n\n\n