I am creating a rock paper scissors game with JavaScript. I currently have the selections in an array of objects. What I am trying to do is when the user selects their choice it will display their choice and the computer's choice, but will also show the winner. I have 3 png image files for rock, paper, and scissors.

My Code with comments on what I am trying to accomplish

const selectionButtons = document.querySelectorAll('[data-selection]')
const finalColumn = document.querySelector('[data-final-column]')
const SELECTIONS = [{
  
  name: 'rock',
  icon: document.querySelector('#uRock'),
  beats: 'scissors'
},
{
  
  name: 'paper',
  icon: document.querySelector('#uPaper'),
  beats: 'rock'
},
{
  
  name: 'scissors',
  icon: document.querySelector('#uScissors'),
  beats: 'scissors'
}
]
selectionButtons.forEach(selectionButton => {

    selectionButton.addEventListener('click', e =>{
     const selectionName = selectionButton.dataset.selection
     
     const selection = SELECTIONS.find(selection => selection.name === selectionName)
     makeSelection(selection)
    })
})
function makeSelection(selection) {
  const computerSelection = randomSelection();
  const yourWinner = isWinner(selection, computerSelection)
  const computerWinner = isWinner(computerSelection, selection)
  
  addSelectionReult(computerSelection, computerWinner)
addSelectionReult(selection, yourWinner)    
}


function addSelectionReult(selection, winner){
  const div = document.createElement('div')
  div.innerHTML = 
  // add icon from selection to div child
  div.classList.add('result-selection') 
  if(winner) div.classList.add('winner')
  if(computerWinner) //add computerLost class to icon img element
  if(yourWinner) //add playerWinner class to icon img element
  finalColumn.after(div)
}

function isWinner(selection, computerSelection){
  return selection.beats === computerSelection.name
}

function randomSelection() {
  const random = Math.floor(Math.random() * SELECTIONS.length) 
  return SELECTIONS[random]
}

HTML of What it is supposed to look like

<!-- <div >
      <img class= "winner" src="/noun-fist-477918.png" alt="">
    </div>
    <div >
      <img  src="/noun-scissors-477919.png" alt="">
    </div> -->

What I am trying to do

1. User selects their choice. (the choice is selection.icon)
2. In the div that is created with JavaScript it will display the choices and the winner. (I have classes made up that will distinguish the winner vs loser)
3. If the computer is the winner the right icon will have the winner class and the left icon will have the playerLost class. Opposite for player being the winner.

Would I have to create a variable that is a child of the div and then append the child?

Or just use if statements and use innerHTML?

What is the best way to accomplish this?

CodePudding user response：

function addSelectionReult(selection, winner, computerSelection){
  const div = document.createElement('div')
  const createDisplay = document.createElement('img')
  createDisplay.src = selection.icon
  div.classList.add('result-selection') 
  if(winner) {createDisplay.classList.add('winner')}
  else{createDisplay.classList.add('loser')}
  
  finalColumn.after(div)
  div.appendChild(createDisplay);
}