Image array in rock,paper, scissors game

When you assign the src, you have to assign the src, not the image itself.

So, replace

compImg.src = imgArray[Math.floor(imgArray.length * Math.random())]

with

compImg.src = imgArray[Math.floor(imgArray.length * Math.random())].src;

...and what you have will work.

Note what you currently have can be simplified to:

const images = ['rock', 'paper', 'scissors'];

const makeImageUrl = id => `img/${id}.png`;

document.querySelector('.userBTN').addEventListener('click', e => {
  const id = e.target.closest('button')?.id;
  if (id && images.includes(id)) {
    userImg.src = makeImageUrl(id);
    cpuPick();
  }
})

function cpuPick() {
  compImg.src = makeImageUrl(images[Math.floor(images.length * Math.random())])
}

<div class="overview">
  <div class="userSide">
    <h4>User:</h4><span> 2</span>
    <img id="userImg" src="img/paper.png" style="width: 220px; height: 220px;">
  </div>
  <div class="compSide">
    <h4>CPU:</h4><span> 2</span>
    <img id="compImg" src="img/paper.png" style="width: 220px; height: 220px;">
  </div>
</div>
<div class="userBTN">
  <button id="rock">Rock</button>
  <button id="paper">Paper</button>
  <button id="scissors">Scissors</button>
</div>

Instead of adding 3 separate event listeners, I'm adding only one, on their parent. In the listener, I'm getting the id from the currently clicked target. If the id is there (if the click wasn't outside any of the buttons) and if it's contained in the images array, I'm getting the image url based on the button's id.

Another improvement is the "images" array no longer keeps images, but strings referencing the image names.
I added a helper function which creates urls from the image names, by suffixing with .png and prefixing with img/.
The usefulness of this is that if, for example, you decide to change the folder of the images later on, instead of having to change code in 6 different places, you only have to change it in one place.
And it's not even about this particular implementation. It's about the principle:

Don't repeat yourself. Or: write DRY code.

Here's the same code, but I modified the makeImageUrl function to return images from lorem picsum. Unfortunately, I couldn't find a more suggestive image for scissors.

const images = ['rock', 'paper', 'scissors'];

const loremPicsumIds = {
   rock: 1049,
   paper: 1073,
   scissors: 23
}

const makeImageUrl = id => `https://picsum.photos/id/${loremPicsumIds[id]}/200/200`;

document.querySelector('.userBTN').addEventListener('click', e => {
  const id = e.target.closest('button')?.id;
  if (id && images.includes(id)) {
    userImg.src = makeImageUrl(id);
    cpuPick();
  }
})

function cpuPick() {
  compImg.src = makeImageUrl(images[Math.floor(images.length * Math.random())])
}

[compImg, userImg]
  .forEach(el => el.src = makeImageUrl('paper'))

.overview {
  display: flex;
}

<div class="overview">
  <div class="userSide">
    <h4>User:</h4><span> 2</span>
    <img id="userImg" src="">
  </div>
  <div class="compSide">
    <h4>CPU:</h4><span> 2</span>
    <img id="compImg" src="">
  </div>
</div>
<div class="userBTN">
  <button id="rock">Rock</button>
  <button id="paper">Paper</button>
  <button id="scissors">Scissors</button>
</div>

Image array in rock,paper, scissors game

Related

Recent Posts