When browser is refreshed, class(.results) should not appear unless button is clicked

Hi All,

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;

//clear past history of results when either one of the buttons are being clicked
function clearResults(){
  const removeResults = document.querySelector('.results');

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]){    
    computerScore = computerScore + 1;
    //console.log("Computer wins: " + computerScore); 
else if (computerChoice === gameOptions[2] && playerChoice === gameOptions[1]){ 
    computerScore = computerScore + 1; 
    //console.log("Computer wins: " + computerScore); 
else if (computerChoice === gameOptions[1] && playerChoice === gameOptions[0]){  
    computerScore = computerScore + 1;  
else if (computerChoice === playerChoice){ 
    tieScore = tieScore + 1;
    //console.log("Tie score: " + tieScore);

//else if (playerChoice !== gameOptions.length){
   // displayResults(selectChoice);

      playerScore = playerScore + 1;
    //console.log("Player wins: " + playerScore);
scoreBoard(playerScore, computerScore, tieScore);


Hi @camperextraordinaire , I am actually writing the code in codepen.

The link is as follows: https://codepen.io/hrhquek/pen/poKYMrp

How do i write the code to insert an onclick event to execute compareChoices when clicked?

Do you mean changing from addEventListener to onclick?

gameButtons.forEach(button => button.addEventListener('click', playerChooses));


gameButtons.forEach(button => {
    button.onclick = e => {playerChooses(e);};

Currently, I see:

gameButtons.forEach(button => button.addEventListener('click', playerChooses));


gameButtons.forEach(button => button.addEventListener('click', clearResults));

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.

function play(e) {
  const playerChoice = e.target.value;
  const computerChoice = computerChooses();
  compareChoices(playerChoice, computerChoice);

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.

1 Like

Hi @camperextraordinaire , i have did the following adjustments:

  • Remove the clearResults function
    gameButtons.forEach(button => button.addEventListener('click', clearResults));
  • As for this, I am not able to create a p element in html due to assessment requirements.

However, i did insert an additional line stating:

results.style.display = "inline-block";

am not sure whether should insert an if statement like this in the displayResults function?

results.style.display = "inline-block";
  • I add in an additional argument for compareChoices

  • Currently, the past history populates as they are not hidden and

  • The undefined part still shows for both player and computer

  • Because const computerChoice = computerChooses(); was not declared but if it was declared, it will populate an error.


Hi @camperextraordinaire ,

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) {

and removing the past history results by adding a variable previousResult into the displayResults function

const previousResults = document.querySelectorAll('.results');
 previousResults.forEach(result => result.remove());

thanks for the help in suggesting the below

  • remove the two click events to the button
  • having two arguments for compareChoices function
  • and amending the function play by calling 2 variable: playerChoice and computerChoice


How should I write the code so that if displayResults is run, then change display property from none to inline- block;?

I tried inserting the code below into the displayResults function

results.style.display = "inline-block";

But it didn’t hide the results…

@camperextraordinaire , thanks! it works perfectly.

Just curious when you mention the following: it is inefficient by removing and recreating the results; would it slow down the browser by doing so?

@camperextraordinaire , thanks for the insights. Appreciate it!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.