我用 javaScript 做了一个剪刀石头布游戏，但它不工作问题出在 botDiv.innerhtml 的最后一个函数中

Question

一切正常，除了 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>

我知道错误在哪里（botdiv.innerhtml 中的最后一个函数），但为什么会发生错误以及如何修复它。它应该同时显示人工选择和机器人选择，但它没有，尽管如果我删除机器人图像选择，我不会收到任何错误。

我写这篇文章是因为我必须写更多的字才能post这个问题

Answer 1

这部分有拼写错误，可能会导致错误。

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' 应该是 'scissors'

'peper' 应该是 'paper'

所以它应该是这样的

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
    }
};

我用 javaScript 做了一个剪刀石头布游戏，但它不工作问题出在 botDiv.innerhtml 的最后一个函数中

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

javascript

html

css

innerhtml

src