javascript - How do I make a function that reset the game on click

Question

I am working on a rock paper scissor game. I'm very new to javascript and only know the basics. The code is a little sloppy. What I want is to be able to continue playing the game after a choice is selected. For example, right now if I click rock, the CPU will randomize a result, but then if I click on paper, the result will stay on the screen and the new result will overlap the old one.

I was thinking of adding another condition to the if statements. Also, I was thinking of adding another function to the return of the if statement that might reset it.

html

<div class="main-container">
  <div class="score">
    <p>You:0</p>
    <p>Computer:0</p>
  </div>

  <div class="user-choice">
    <img id="rock" class="choice" src="icons/rock.png">
    <img id="paper" class="choice" src="icons/paper.png">
    <img id="scissors" class="choice" src="icons/scissors.png">
  </div>
  <div class="cpu-result">
    <img class="cpu-rock" src="icons/rock.png">
    <img class="cpu-paper" src="icons/paper.png">
    <img class="cpu-scissors" src="icons/scissors.png">
  </div>
</div>

js

const userChoice = document.querySelectorAll('.choice')
const cpuScissors = document.querySelector('.cpu-scissors')
const cpuPaper = document.querySelector('.cpu-paper')
const cpuRock = document.querySelector('.cpu-rock')


function cpuChoice() {
  const rand = Math.random()
  if (rand < .34) {
    cpuPaper.style.display = 'inline-block'
  } else if (rand >= .67) {
    cpuRock.style.display = 'inline-block'
  } else {
    cpuScissors.style.display = 'inline-block'
  }
}

userChoice.forEach(userChoice =>
userChoice.addEventListener('click', cpuChoice))

css

.cpu-scissors {
  display: none;
}

.cpu-paper {
  display: none;
}

.cpu-rock {
  display: none;
}

.cpu-result img {
  position: absolute;
  height: 11rem;
}

Answer 1

Firstly, you need to remove position: absolute; for img which was causing the overlapping.

Secondly, each time you call cpuChoice(), you need to hide the previous element before showing the current element.

const userChoice = document.querySelectorAll('.choice')
const cpuScissors = document.querySelector('.cpu-scissors')
const cpuPaper = document.querySelector('.cpu-paper')
const cpuRock = document.querySelector('.cpu-rock')
let currentItem;

function cpuChoice() {
  const rand = Math.random();
  if (currentItem) {
    currentItem.style.display = 'none';
  }
  if (rand < .34) {
    cpuPaper.style.display = 'inline-block';
    currentItem = cpuPaper;
  } else if (rand >= .67) {
    cpuRock.style.display = 'inline-block';
    currentItem = cpuRock;
  } else {
    cpuScissors.style.display = 'inline-block';
    currentItem = cpuScissors;
  }
}

userChoice.forEach(userChoice =>
  userChoice.addEventListener('click', cpuChoice));

.cpu-scissors {
  display: none;
}

.cpu-paper {
  display: none;
}

.cpu-rock {
  display: none;
}

.cpu-result img {
  height: 5rem;
}

<div class="main-container">
  <div class="score">
    <p>You:0</p>
    <p>Computer:0</p>
  </div>

  <div class="user-choice">
    <img id="rock" class="choice" src="icons/rock.png">
    <img id="paper" class="choice" src="icons/paper.png">
    <img id="scissors" class="choice" src="icons/scissors.png">
  </div>
  <div class="cpu-result">
    <img class="cpu-rock" src="icons/rock.png">
    <img class="cpu-paper" src="icons/paper.png">
    <img class="cpu-scissors" src="icons/scissors.png">
  </div>
</div>