A game of Rock Paper Scissors written in JavaScript ✋

[@BroCodez]

const playerText = document.querySelector("#playerText"); const computerText = document.querySelector("#computerText"); const resultText = document.querySelector("#resultText"); const choiceBtns = document.querySelectorAll(".choiceBtn"); let player; let computer; let result; choiceBtns.forEach(button => button.addEventListener("click", () => { player = button.textContent; computerTurn(); playerText.textContent = `Player: ${player}`; computerText.textContent = `Computer: ${computer}`; resultText.textContent = checkWinner(); })); function computerTurn(){ const randNum = Math.floor(Math.random() * 3) + 1; switch(randNum){ case 1: computer = "ROCK"; break; case 2: computer = "PAPER"; break; case 3: computer = "SCISSORS"; break; } } function checkWinner(){ if(player == computer){ return "Draw!"; } else if(computer == "ROCK"){ return (player == "PAPER") ? "You Win!" : "You Lose!" } else if(computer == "PAPER"){ return (player == "SCISSORS") ? "You Win!" : "You Lose!" } else if(computer == "SCISSORS"){ return (player == "ROCK") ? "You Win!" : "You Lose!" } } Document Player: Computer: Result: ROCK PAPER SCISSORS .choiceBtn{ line-height: 30px; width: 150px; } #gameDiv{ font-family: 'Brush Script MT', cursive; border: 3px solid; border-radius: 25px; padding: 10px; background-color: lightgrey; text-align: center; } #playerText{ color: blue; } #computerText{ color: red; }

[@biorix9704]

He just copy pasted entire code in a comment💀💀

[@Trexzilla]

@@biorix9704 but mine isn't working

[@percussion1999]

Nice sor

[@ninadbhide1282]

Thank you Bro, I am learning JS using your tutorials

[@MrTitanfr]

hey bro...love your work man...i` m learning so much from you...thanks for the time and effort plz keep up the good work...bless you

[@Customkettlesdublin]

this video earned my sub, making everything so simple to follow . wasnt working for like 5 mins thought i wasted time but just my script tag was inside my div :))

[@mayowafalomo1399]

You didn't disappoint me when i needed this video, Thank you soo much.

[@joshuwa3953]

How can we implement a score tracker for this ?

[@iitzrohan]

Here's How i did it. const playerScore = document.getElementById("playerScore"); const computerScore = document.getElementById("computerScore"); let result; let countplayer = 0;; let countComputer = 0; choiceBtns.forEach(button => button.addEventListener("click", () => { computerTurn(); player = button.textContent; playerText.textContent = `Player: ${player}`; computerText.textContent = `Computer: ${computer}`; result = checkWinner(); resultText.textContent = result; if (result == "You Win!") { countplayer += 1; playerScore.textContent = countplayer; } if (result == "You Lose!") { countComputer += 1; computerScore.textContent = countComputer; } }));

[@diegoserrano8302]

thank you for the video i have a deadline for a project coming and this helped me a lot!!

[@dianadoroi154]

Thank you so much for your work!

[@lucabinder9829]

I have already watched 87 videos for JavaScript. All from you.

[@kmdoll]

for the youtube algorithmmmm

[@cashvillekid98]

The check winner function doesn't check all possible conditions...like what if computer chooses paper and the player chooses rock?

[@kwazeo]

You are the best! :D

[@josephquezada6138]

hey you never used the result variable, also why did you put *3 + 1?

[@agent-33]

Good eye. The result variable is unused and must be removed from the code. The Math.random() * 3 + 1 within Math.floor() will produce number from 1 to 3. You might be confused what is the point of + 1 there, to understand this, we must understand what the code Math.random() alone, can produce. Math.random() returns a float from 0.00000 to 0.999999, in other words, it gives 0 to less than 1. If we use Math.random() * 3, this will produce numbers from 0.000000 to 2.999999. If we put it inside Math.floor(), it will remove the decimals so the result will range from 0 to 2. Actually, this should be enough to produce what we want, 3 different numbers: 0, 1, 2. But the coder want a number range from 1~3 (1, 2, 3) so he put + 1 to offset the result of random number by additional 1.

[@Maha-sj2qx]

how come the results variable is never used but it is declared?

[@MacN_]

Hiya, thank you for your videos! I completed this program, however my machine didn't like a section of code. Here is the error message: uncaught typeError: "choiceBtns.forEach" is not a function. line 9. running through VS code, live server. Other than that the program looks how it should. Thank you, MacN (anonymous)

[@MacN_]

any suggestions to remedy are appreciated.

[@TacNral]

@@MacN_ Hi, I have experienced the same problem, if you haven't found and answer yet it might be because it needs to be querySelectorAll instead of querySelector

[@yy.u.i]

​​@@TacNralThank you. I had the same problem, but after adding the 'All' it was resolved

[@nemeandragon9062]

I tried following along and doing it myself but I couldn't get the live server to work as it should... After copying your code completely, the web page still doesn't react whenever I click on the buttons. Wondering if I have something incorrectly configured inside of VS code?

[@mst3ksanta]

I haven't played htis version of pokemon for a long time

[@малосольные-окурки]

great video! lesgo!

[@sherezali9691]

thanksssssssssssssssssssssssssss brother🥰🥰🥰

[@shaneforde5613]

Great for beginners

[@sayyedshoeib7107]

how to find ho is winner after the player or computer point is 5,10 final result

[@Islamicway6855]

Which software you use for this?

[@tintedclown4876]

Visual studio code

[@edisonviolante]

Could someone helpme out about this code? I would like to improve it with an total score in the corner and switching the "Player" name for the real name when acessing the page (Idk if by prompt would be a good choice)

[@edisonviolante]

and maybe a win-streak counter to

[@amniar8158]

thanks so much man

[@marxLz]

🙏🙏🙏 For the youtube algorithm.

[@sleepyfeokx]

function computerTurn() { const randNum = Math.floor(Math.random() * 3) + 1;

[@Trexzilla]

mine isn`t working

[@jailenegonzalez4350]

mine either !

[@livegaming3051]

I prefer to code rock paper scissors in f*ing unity than this 💀

[@Cloud_with_lois]

nobody cares

[@ShadowedSpectre]

shut up. You just dont know how to code in REAL programming languages💀💀💀

[@sayyedshoeib7107]

awosome

[@sarthakladfacts945]

❤❤

[@pranayshelke8666]

Thanks budyy

[@thehoeynator]

I followed it step for step and it didn't work

[@secretsdowntherain5894]

same here

[@rolando8966]

It looks like he added an “s” to “Btn” in JavaScript…. But not in HTML… that might be why

[@rolando8966]

Or maybe u pressed you put a “single quote “ vs a “backTick” it’s the button above “tab” key

[@rolando8966]

At 6:28 min mark

[@percussion1999]

Hii😊

[@shubhangichavan6925]

for yt

[@Gunz1234]

fix for the Uncaught TypeError: choiceBtn.forEach is not a function const choiceBtn = document.getElementsByClassName("//urID"); Array.from(choiceBtn).forEach(button => button.addEventListener("click", () => { player = button.textContent; computerTurn(); playerText.textContent = `Player: ${player}`; computerText.textContent = `Computer: ${computer}`; resultText.textContent = checkWinner(); })); basically add Array.from().forEach put values and it will work

[@Mrmeepdev]

The value in the video was choiceBtns = document.querySelectorAll('.choiceBtn') and not ChoiceBtn.document.querySelectorAll('.choiceBtn') You probably had a TypeError when writing the forEach function