My function match() is not working...I thought I can store the return value of playerGameOne and playerGameTwo so I can compare the values of playerOne and playerTwo, and then compare. This doesn't seem to be the logic, since my function will just generate random display messages and not following the conditions I set upon in the match function. But the console log is showing different values from what I rolled. Please help:
const max = 8
const para = document.querySelector('p')
const buttonOne = document.querySelector('button.first')
const buttonTwo = document.querySelector('button.second')
const buttons = document.querySelectorAll('button')
let playerOne
let playerTwo
let playerPoints = 0
let x
let y
function playerGameOne(){
let random = Math.floor(Math.random()*(max));
playerOne = (random + 1)
return playerOne
}
function playerGameTwo(){
let random = Math.floor(Math.random()*(max));
playerTwo = (random + 1)
return playerTwo
}
function displayMessageOne(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerOne} on the dice.`
document.body.append(para)
}
function displayMessageTwo(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerTwo} on the dice.`
document.body.append(para)
}
function displaySuccessMatchMessage(){
// if(playerPoints === 5){
// para.innerText = "Congratulations! You got 5 points. Play again."
// return document.body.append(para)
// }
const para = document.createElement('p');
para.innerText = `You gained a point! You have ${playerPoints}.`
document.body.append(para)
}
function displayFailedMatchMessage(){
const para = document.createElement('p');
para.innerText = "Try again."
document.body.append(para)
}
function diceOne(){
playerGameOne();
displayMessageOne()
}
function diceTwo(){
playerGameTwo();
displayMessageTwo();
};
function match(){
playerGameOne();
playerGameTwo();
x = playerGameOne();
y = playerGameTwo();
console.log(x+y) //getting different log values
if((x+y) > 8){
playerPoints+=1;
displaySuccessMatchMessage();
}else{
playerPoints+=0;
displayFailedMatchMessage()
}
if(playerPoints === 5){
displaySuccessMatchMessage()
}
}
buttonOne.addEventListener('click', diceOne)
buttonTwo.addEventListener('click', diceTwo)
buttonTwo.addEventListener('click', match) h1, div, p{
text-align: center;
}
img{
width: 200px;
} <h1>
Click on me: Goal is to get to 5 points.
</h1>
<div>
<button class="first">
<img class = "firstImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
<button class="second">
<img class = "secondImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
</div>Try setting x and y in your diceOne and diceTwo functions.
const max = 8
const para = document.querySelector('p')
const buttonOne = document.querySelector('button.first')
const buttonTwo = document.querySelector('button.second')
const buttons = document.querySelectorAll('button')
let playerOne
let playerTwo
let playerPoints = 0
let x = 0
let y = 0
function playerGameOne(){
let random = Math.floor(Math.random()*(max));
playerOne = (random + 1)
return playerOne
}
function playerGameTwo(){
let random = Math.floor(Math.random()*(max));
playerTwo = (random + 1)
return playerTwo
}
function displayMessageOne(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerOne} on the dice.`
document.body.append(para)
}
function displayMessageTwo(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerTwo} on the dice.`
document.body.append(para)
}
function displaySuccessMatchMessage(){
// if(playerPoints === 5){
// para.innerText = "Congratulations! You got 5 points. Play again."
// return document.body.append(para)
// }
const para = document.createElement('p');
para.innerText = `You gained a point! You have ${playerPoints}.`
document.body.append(para)
}
function displayFailedMatchMessage(){
const para = document.createElement('p');
para.innerText = "Try again."
document.body.append(para)
}
function diceOne(){
x = playerGameOne(); //update x
displayMessageOne()
}
function diceTwo(){
y = playerGameTwo(); //update y
displayMessageTwo();
};
function match(){
//use functions diceOne and diceTwo to set x and y
//playerGameOne();
//playerGameTwo();
//x = playerGameOne();
//y = playerGameTwo();
console.log(x+y) //getting different log values
if((x+y) > 8){
playerPoints+=1;
displaySuccessMatchMessage();
}else{
playerPoints+=0;
displayFailedMatchMessage()
}
if(playerPoints === 5){
displaySuccessMatchMessage()
}
}
//diceOne and diceTwo now set x and y
buttonOne.addEventListener('click', diceOne)
buttonTwo.addEventListener('click', diceTwo)
buttonTwo.addEventListener('click', match)h1, div, p{
text-align: center;
}
img{
width: 200px;
}<h1>
Click on me: Goal is to get to 5 points.
</h1>
<div>
<button class="first">
<img class = "firstImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
<button class="second">
<img class = "secondImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
</div>