Problems in Making RPS Game Using HTML, CSS, Javascript

I’m making a rock, paper, scissors game, but it seems doesn’t work well. I’ve tried looking for mistakes though I can’t find any. When I click the image, it doesn’t pop out as well as the text/message. The console said:

script.js:91 Uncaught ReferenceError: imageDatabase is not defined
    at rpsFrontEnd (script.js:91)
    at rpsGame (script.js:39)
    at HTMLImageElement.onclick (index.html:39)

Could you please help me correct them? I really appreciate your help, Thanks.

function rpsGame(yourChoice) {
  console.log(yourChoice);
  var humanChoice, botChoice;
  humanChoice = yourChoice.id;

  botChoice = numberToChoice(randToRpsInt());
  console.log('Computer choice: ', botChoice);

  results = decideWinner(humanChoice, botChoice);
  console.log(results);

  message = finalMessage(results) // {message: you won, color: green}
  console.log(message);

  rpsFrontEnd(yourChoice.id, botChoice, message);
}

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

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

function decideWinner(yourChoice, computerChoice) {
  var 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
    },
  }

  var yourScore = rpsDatabase[yourChoice][computerChoice];
  var computerScore = rpsDatabase[computerChoice][yourChoice];

  return [yourScore, computerScore];
}

function finalMessage([yourScore, computerScore]) {
  if (yourScore === 0) {
    return {
      'message': 'You lost!',
      'color': 'red'
    };
  } else if (yourScore === 0.5) {
    return {
      'message': 'You tie!',
      'color': 'yellow'
    };
  } else {
    return {
      'message': 'You won!',
      'color': 'green'
    };
  }
}

function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
  var imagesDatabase = {
    'rock': document.getElementById('rock').src,
    'paper': document.getElementById('paper').src,
    'scissors': document.getElementById('scissors').src
  }

  // remove all the images
  document.getElementById('rock').remove();
  document.getElementById('paper').remove();
  document.getElementById('scissors').remove();

  var humanDiv = document.createElement('div');
  var botDiv = document.createElement('div');
  var messageDiv = document.createElement('div');

  humanDiv.innerHTML = "<img src='" + imagesDatabase[humanImageChoice] + "' height=150 style='box-shadow: 0px 10px 50px blue;'>"
  messageDiv.innerHTML = "<h1 style='color: " + finalMessage['color'] + "; font-size: 60px; padding: 30px;'>" + finalMessage['message'] + "</h1>"
  botDiv.innerHTML = "<img src='" + imageDatabase[botImageChoice] + "' height=150 style='box-shadow: 0px 10px 50px red;'>"

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

<div class="container-3">
  <h2>Challenge 3: Rock, Paper, Scissors</h2>
  <div class="flex-box-rps" id="flex-box-rps-div">
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Rock-paper-scissors_%28rock%29.png" alt="" id="rock" height=150 onclick="rpsGame(this)">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Rock-paper-scissors_%28paper%29.png" alt="" id="paper" height=150 onclick="rpsGame(this)">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Rock-paper-scissors_%28scissors%29.png" alt="" id="scissors" height=150 onclick="rpsGame(this)">
  </div>
</div>

Answer

You have misspelled the imageDatabase, it should be imagesDatabase

botDiv.innerHTML = "<img src='" + imagesDatabase[botImageChoice] + "' height=150 style='box-shadow: 0px 10px 50px red;'>"

Advertisement

Answer