Building a rock, paper and scissors game on javascript

Question

I'm new to programming and decided to try my hands on this side project. Having problems making the code run and wanted to ask if the javascript logic is functional as it seems nothing is running. Help would sincerely be appreciated

var myArray = ["rock", "paper", "scissors"];

var playerScore = document.getElementsByClassName("player-score");
var computerScore = document.getElementsByClassName("computer-score");
var playerCount = 0;
var computerCount = 0;
var myRandom = myArray[Math.floor(Math.random() * myArray.length)];

var btnRock = document.getElementsByClassName("Rock");
var btnPaper = document.getElementsByClassName("Paper");
var btnScissors = document.getElementsByClassName("Scissors");

btnRock.onclick = function() {
  if (myRandom === myArray[2]) {
    playerCount++;
    playerScore.innerHTML = playerCount;
  } else if (myRandom === myArray[0]) {
    return playerCount;
  } else {
    computerCount++;
    computerScore.innerHTML = computerCount;
  }
};


btnPaper.onclick = function() {
  if (myRandom === myArray[0]) {
    playerCount++;
    playerScore.innerHTML = playerCount;
  } else if (myRandom === myArray[1]) {
    return playerCount;
  } else {
    computerCount++;
    computerScore.innerHTML = computerCount;
  }
};


btnScissors.onclick = function() {
  if (myRandom === myArray[1]) {
    playerCount++;
    playerScore.innerHTML = playerCount;
  } else if (myRandom === myArray[2]) {
    return playerCount;
  } else {
    computerCount++;
    computerScore.innerHTML = computerCount;
  }
};

Hi! Welcome to StackOverflow! Please read our [tour](https://stackoverflow.com/tour) to get a better understanding about how to add a [*minimal*, *reproducible* example](https://stackoverflow.com/help/minimal-reproducible-example) — 0stone0, Dec 04 '20 at 16:43
The return value of an `onclick` function is not used, so what do you expect `return playercount` to do? — Barmar, Dec 04 '20 at 16:43
See https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method — Barmar, Dec 04 '20 at 16:44

Zsolt Meszaros · Accepted Answer · 2020-12-04T17:54:30.137

There are a couple of errors with your code. First, getElementsByClassName() returns an array-like object, so if you want to grab the first element with given class name, you need to do it like with arrays: var btnRock = document.getElementsByClassName("rock")[0].

You could also use querySelector() instead, which returns the first element, so it might be easier to use: var btnRock = document.querySelector(".rock").

Second, you only generate var myRandom on page load. You need to move it to your onClick handlers. This way, whenever you click on a button, you generate a new random item.

I know naming is hard, but myArray and myRandom are terrible choices.

The code below is far from perfect and I would change a lot more things, but it works. I just hope you can learn something new from it.

var playerCount = 0;
var computerCount = 0;
var items = ["rock", "paper", "scissors"];
var playerScore = document.querySelector(".player-score");
var computerScore = document.querySelector(".computer-score");
var winner = document.querySelector(".winner");
var btnRock = document.querySelector(".rock");
var btnPaper = document.querySelector(".paper");
var btnScissors = document.querySelector(".scissors");

function getRandomItem() {
  return items[Math.floor(Math.random() * items.length)];
}

btnRock.onclick = function() {
  var randomItem = getRandomItem();
  if (randomItem === items[2]) {
    playerCount++;
    playerScore.textContent = playerCount;
    winner.textContent = 'Player';
  } else if (randomItem === items[0]) {
    winner.textContent = 'Draw';
  } else {
    computerCount++;
    computerScore.textContent = computerCount;
    winner.textContent = 'Computer';
  }
};

btnPaper.onclick = function() {
  var randomItem = getRandomItem();
  if (randomItem === items[0]) {
    playerCount++;
    playerScore.textContent = playerCount;
    winner.textContent = 'Player';
  } else if (randomItem === items[1]) {
    winner.textContent = 'Draw';
  } else {
    computerCount++;
    computerScore.textContent = computerCount;
    winner.textContent = 'Computer';
  }
};

btnScissors.onclick = function() {
  var randomItem = getRandomItem();
  if (randomItem === items[1]) {
    playerCount++;
    playerScore.textContent = playerCount;
    winner.textContent = 'Player';
  } else if (randomItem === items[2]) {
    winner.textContent = 'Draw';
  } else {
    computerCount++;
    computerScore.textContent = computerCount;
    winner.textContent = 'Computer';
  }
};

<div>Winner: <span class="winner">-</span></div>
<button class="rock">Rock</button>
<button class="scissors">Scissors</button>
<button class="paper">Paper</button>
<div>Player: <span class="player-score">0</span></div>
<div>Computer: <span class="computer-score">0</span></div>

Building a rock, paper and scissors game on javascript

1 Answers1