How can I amend the code below so that whenever a browser is refreshed, the class(.results) should not be populated unless button is clicked. Attaching screenshot…
Pardon me for the bad CSS styling, am still working on it…
I tried inserting an if statement indicating if playerChoice does not equal to gameOptions.length then return displayResult(selectChoice) would populate. But somehow, when i clicked the same buttons multiple times, it would display displayResult(selectChoice) .
Therefore, how can i resolve this?
const gameOptions = ["Lapis", "Papyrus", "Scalpellus"];
//let playerChoice = gameOptions[1]; // Here's where the player makes their choice.
let playerScore = 0;
let computerScore = 0;
let tieScore = 0;
const gameButtons = document.querySelectorAll('.game-button');
gameButtons.forEach(button => button.addEventListener('click', playerChooses));//forEach return value for all buttons clicked instead of one
function playerChooses(e){ //result is taking from the button value when clicked
const playerChoice = e.target.value;
console.log(playerChoice);
//clearResults();
compareChoices(playerChoice);
}
//clear past history of results when either one of the buttons are being clicked
function clearResults(){
const removeResults = document.querySelector('.results');
document.querySelector('body').removeChild(removeResults);
}
gameButtons.forEach(button => button.addEventListener('click', clearResults));
function computerChooses(){
const computerChoice = gameOptions[Math.floor(Math.random() * gameOptions.length)];
return computerChoice; // return the value of computerChoice
}
function displayResults(resultText){ //resultText values will be assigned to the variable result
const results = document.createElement('p');
results.innerText = resultText;
results.className = 'results'; //creating a class name for CSS
document.querySelector('body').appendChild(results).style.color = "green"; //append values into body
return results; //return results for every scenario
}
function compareChoices(playerChoice){
const computerChoice = computerChooses();//need to declare this so as to define computerChoice
const computerWins = ("The computer wins! The computer chose " + computerChoice + " and the player chose " + playerChoice + ".");
const playerWins = ("The player wins! The player chose " + playerChoice + " and the computer chose " + computerChoice + ".");
const nobodyWins = ("It's a tie! The computer chose " + computerChoice + " and the player chose " + playerChoice + ".");
const selectChoice = ("Please select the options above to play game.");
function scoreBoard(playerScore, computerScore, tieScore){
const playerCell = document.getElementById('player-score');
playerCell.innerHTML = playerScore;
const computerCell = document.getElementById('computer-score');
computerCell.innerHTML = computerScore;
const tiesCell = document.getElementById('tie-score');
tiesCell.innerHTML = tieScore;
//not applicable to enter 3 different returns for playerScore, computerScore and tieScore as it will only be able to show one return
}
if (computerChoice === gameOptions[0] && playerChoice === gameOptions[2]){
displayResults(computerWins);
computerScore = computerScore + 1;
//console.log("Computer wins: " + computerScore);
}
else if (computerChoice === gameOptions[2] && playerChoice === gameOptions[1]){
displayResults(computerWins);
computerScore = computerScore + 1;
//console.log("Computer wins: " + computerScore);
}
else if (computerChoice === gameOptions[1] && playerChoice === gameOptions[0]){
displayResults(computerWins);
computerScore = computerScore + 1;
}
else if (computerChoice === playerChoice){
displayResults(nobodyWins);
tieScore = tieScore + 1;
//console.log("Tie score: " + tieScore);
}
//else if (playerChoice !== gameOptions.length){
// displayResults(selectChoice);
//}
else{
displayResults(playerWins);
playerScore = playerScore + 1;
//console.log("Player wins: " + playerScore);
}
scoreBoard(playerScore, computerScore, tieScore);
}
compareChoices();
Instead of assigning two click events to each button that do different things, just add one click event to each button and execute a function.
You do not need a clearResults function. Don’t append the results section each time. Just keep it hidden when the game loads and then make it visible and update the contents of it within your displayResults function. Just go ahead and create the p element and give it a class name of results but use display: none. Then, when displayResults runs, have the function change the display property to inline-block.
The way I would structure this game is as follows. You will have to modify some of your logic to achieve, but it would not be much different.
User clicks a button and execute a new function called something like play. This function would get the player’s choice , then get the compterChoice, and finally compare the choices. This flow makes sense as this is how the game is actually played.
You will need to modify your compareChoices to accept a 2nd argument.
Another suggestion I have for you is to move all your function declarations to the top of the code and move all the “main” code to the bottom. Right now you have everything jumbled together, which makes reading through the code more difficult for someone else.
I managed to solve the portion if buttons are not clicked, scores should be 0 and results should not be populated unless button is clicked by adding an if statement in the compareChoices function
// Check if player had made choice; if playerChoice is null or undefined, exit function compareChoices
if (!playerChoice) {
return;
}
and removing the past history results by adding a variable previousResult into the displayResults function
