我用 javaScript 做了一個石頭剪刀布游戲，但它不起作用問題出在 botDiv.innerhtml 中的最后一個 function

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 中的最后一個 function）但為什么會發生以及如何解決它。 它應該同時顯示人類選擇和機器人選擇，但它沒有，盡管如果我刪除機器人圖像選擇，我不會收到任何錯誤。

我寫這個是因為我必須寫更多的字，這樣我才能發布這個問題

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