i made a rock paper scissors game with javaScript but it's not working the problem is in the last function in botDiv.innerhtml

Question

everything works except the botImageChoice

function rpsGame(yourChoice) {
  console.log(yourChoice);
  let humanChoice, botChoice;
  humanChoice = yourChoice.id;
  botChoice = numberToChoice(random());
  results = decideWinner(humanChoice, botChoice)
  message = finalMessage(results);
  rpsFrontEnd(yourChoice.id, botChoice.id, message)
};

function random() {
  return Math.floor(Math.random() * 3);
};

function numberToChoice(number) {
  return ['rock', 'paper', 'scissors'][number];
};

function decideWinner(yourChoice, botChoice) {
  let rpsDataBase = {
    'rock': {
      'scissoers': 1,
      'rock': 0.5,
      'paper': 0
    },
    'paper': {
      'rock': 1,
      'paper': 0.5,
      'scissors': 0
    },
    'scissors': {
      'peper': 1,
      'scissors': 0.5,
      'rock': 0
    }
  };

  let yourScore = rpsDataBase[yourChoice][botChoice];
  let botScore = rpsDataBase[botChoice][yourChoice];

  return [yourScore, botScore]
};

function finalMessage([yourScore, botScore]) {
  if (yourScore === 0) {
    return {
      'message': 'You Lost!',
      'color': 'red'
    };
  } else if (yourScore === 0.5) {
    return {
      'message': 'Its a Tie!',
      'color': 'yellow'
    };
  } else {
    return {
      'message': 'You Won!',
      'color': 'green'
    }
  }
}

function rpsFrontEnd(humanimageChoice, botImageChoice, finalMessage) {
  let imagesDataBase = {
    'rock': document.getElementById('rock').src,
    'paper': document.getElementById('paper').src,
    'scissors': document.getElementById('scissors').src
  }

  document.getElementById('rock').remove();
  document.getElementById('paper').remove();
  document.getElementById('scissors').remove();

  let humanDiv = document.createElement('div');
  let botDiv = document.createElement('div');
  let mesageDiv = document.createElement('div');

  humanDiv.innerHTML = "<img src='" + imagesDataBase[humanimageChoice] + "'height=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>"
  botDiv.innerHTML = "<img src='" + imagesDataBase[botimageChoice] + "'height=150 style='box-shadow: 0px 10px 50px rgba(243, 38, 24, 1);'>" //the error is here

  document.getElementById('flex-box-rps-div').appendChild(humanDiv);
  document.getElementById('flex-box-rps-div').appendChild(botDiv);
}

<div class="container-2">
  <h2>Cat Generator</h2>
  <button class="btn btn-success" id="cat-generator" onclick=generateCat()>Generate Cats</button>
  <button class="btn btn-danger" onclick=removeImg()>Delete</button>

  <div class="flex-box-container-2" id="flex-cat-gen">

  </div>
</div>

<div class="container-3">
  <h2>Rock, Paper, scissors</h2>
  <div class="flex-box-rps" id="flex-box-rps-div">
    <img id="rock" src="https://webstockreview.net/images/clipart-rock-animated-4.jpg" height=150 alt="img" onclick=rpsGame(this)>
    <img id="paper" src="images/pngkey.com-loose-leaf-paper-png-2921367.png" height=150 alt="img" onclick=rpsGame(this)>
    <img id="scissors" src="images/pngaaa.com-721670.png" height=150 alt="img" onclick=rpsGame(this)>
  </div>
</div>

I know where is the error (the last function in botdiv.innerhtml) but why is it happening and how can I fix it. it should show both the human choice and the bot choice but it doesn't, although if I remove the bot image choice I don't get any errors.

im writing this because I have to write more words so I can post the question

Answer 1

In this part there are spelling mistakes which might be resulting in the error.

let rpsDataBase = {
    'rock': {
      'scissoers': 1,
      'rock': 0.5,
      'paper': 0
    },
    'paper': {
      'rock': 1,
      'paper': 0.5,
      'scissors': 0
    },
    'scissors': {
      'peper': 1,
      'scissors': 0.5,
      'rock': 0
    }
  };

'scissoers' should be 'scissors'

'peper' should be 'paper'

So it should look like this

let rpsDataBase = {
    'rock': {
      'scissors': 1,
      'rock': 0.5,
      'paper': 0
    },
    'paper': {
      'rock': 1,
      'paper': 0.5,
      'scissors': 0
    },
    'scissors': {
      'paper': 1,
      'scissors': 0.5,
      'rock': 0
    }
};