Image array in rock,paper, scissors game

const rock = document.getElementById('rock')
const paper = document.getElementById('paper')
const scissors = document.getElementById('scissors')

rock.addEventListener('click', function(){
    userImg.src = "img/rock.png"
    cpuPick()
})
paper.addEventListener('click', function(){
    userImg.src = "img/paper.png"
    cpuPick()
})
scissors.addEventListener('click', function(){
    userImg.src = "img/scissors.png"
    cpuPick()
})

let imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'img/rock.png'

imgArray[1] = new Image();
imgArray[1].src = 'img/paper.png'

imgArray[2] = new Image();
imgArray[2].src = 'img/scissors.png'

function cpuPick(){
    compImg.src = imgArray[Math.floor(imgArray.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>

I am making a javascript rock, paper, scissors game and trying to pass the function "cpuPick()" as soon as the user presses on a button to take his pick. Currently, if the user clicks on ‘Rock’ the image of rock will show on the user side but the CPU image will disappear as if it can’t read it. Where is my problem?

>Solution :

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;

Please note what you currently have can be simplified to:

let 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(2 * 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 going ahead and doing the same thing for all.

Another improvement is the "images" array only contains strings referencing the image names, not the images. And 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.