so I made this code by using CSS, HTML and javascript and I keep getting this error and that my scissor function isn’t working and just a bunch of not working I copied the tutorial and I am still lost
// rock paper scissors game
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);
//Math.random() * 3 would give any number below 3 including decials always remeber capital M so use 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 },
'scissor': {'paper': 1, 'scissors': 0.5, 'rock':0 }
};
var yourScore = rpsDatabase[yourChoice] [computerChoice];
var computerScore = rpsDatabase[computerChoice] [yourChoice];
return [yourScore, computerScore];
}
// this part and how the computerScore is undefined here is an error
function finalmessage([yourScore, computerScore]) {
if (yourScore === 0) {
return {'message': 'you lost!', 'colour': 'red'};
} else if (yourScore === 0.5) {
return {'message': 'you tied', 'color': 'yellow'};
} else {
return{'message': 'you win!', 'color': 'green'};
}
}
function rpsfrontend(humanimagechoice, botimagechoice, finalmessage) {
var imagesdatabase = {
'scissors': document.getElementById('scissors').src,
'rock': document.getElementById('rock').src,
'paper': document.getElementById('paper').src
}
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 width=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>"
messageDiv.innerHTML = "<h1 style='color: " + finalmessage['color'] + "; font-size: 60px; padding: 30px; '>" + finalmessage['message'] + "</h1>"
botDiv.innerHTML = "<img src='" + imagesdatabase[botimagechoice] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(0, 0, 0,);'>"
document.getElementById('flex-box-rps-div').appendChild(humanDiv);
document.getElementById('flex-box-rps-div').appendChild(botDiv);
document.getElementById('flex-box-rps-div').appendChild(messageDiv);
}
<div class="container-3">
<h2>Challenge 3: Rock, Paper, Scissosrs</h2>
<div class="flex-box-rps" id="flex-box-rps-div">
<img id="rock" src="https://www.pinclipart.com/picdir/middle/3-35038_rock-clipart-for-free-cartoon-rock-transparent-background.png" height=150 width= 150 alt="" onclick="rpsGame(this)">
<img id="paper" src="https://media.istockphoto.com/vectors/cartoon-blank-piece-of-paper-vector-id1190524331?k=20&m=1190524331&s=170667a&w=0&h=1lGBZ4V1sywxiqWQ3M-PqjdEkvjVwMnJF9GB_f1iGcQ=" height=150 width= 150 alt="" onclick="rpsGame(this)" >
<img id="sicissors" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.ldproducts.com%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2F3%2Fimage%2F9df78eab33525d08d6e5fb8d27136e95%2F2%2F0%2F2000_1014265749.jpg&f=1&nofb=1" height=150 width= 150 alt="" onclick="rpsGame(this)">
</div>
</div>