HTML and JS: How do I use textContent in a div to display text after clicking a button without having the text disappear quickly?

Question

I want to display the results of a rock paper scissors game in a div through DOM methods after clicking a button.

After clicking a button of choice, however, the text like "You Win! rock beats scissors" is only displayed for a short period of time. How do I have the results stay displayed?

I am currently using textContent. However, when I tried innerHTML, the text does not display at all after clicking a button.

html

<html>
<head>
  <title>Page Title</title>
  <meta charset="UTF-8"/>
</head>
<body>
  <form> 
    <button id="rockBtn">Rock</button>
  </form> 
  <div id="results"></div>
  </body>
<script src="main.js"></script>
</html>

javascript

let playerSelection;

function computerPlay(choices =["rock", "paper", "scissors"]) {
  const randomIndex = Math.floor(Math.random() * choices.length);
  const randomReturn = choices[randomIndex];
  return randomReturn;
}

let computerSelection = computerPlay();

function playRound(playerSelection, computerSelection) {
  computerSelection = computerPlay();

  if (playerSelection.toLowerCase() === "rock") {
    if (computerSelection === "paper") {
      let resultText = "You Lose! " + computerSelection + " beats " + playerSelection;
      computerScore++;
      document.getElementById("results").textContent = resultText;
  } else if (computerSelection === "scissors") {
      let resultText = "You Win! " + playerSelection + " beats " + computerSelection;
      playerScore++;
      console.log(resultText);
      document.getElementById("results").textContent = resultText;
  } else if (computerSelection === "rock") {
      let resultText = "It's a draw! " + playerSelection + " and " + computerSelection;
      console.log(resultText);
      document.getElementById("results").textContent = resultText;
  }
}
}
document.getElementById("rockBtn").addEventListener("click", function(){
  playRound("rock", computerSelection);
});

Your code seems to be missing some closures on the conditional statements... but you can always create a `setTimeout()` to display your text.... — dale landry, Mar 25 '21 at 01:12
Edited and added closing curly brackets to the js snippet. Thank you for bringing that to my attention. I can give setTimeout() a try. — lblare123, Mar 25 '21 at 01:25

score 2 · Answer 1 · answered Mar 25 '21 at 01:27

You need to prevent the form from submitting... pass the event into your listener followed by... e.preventDefault()

document.getElementById("rockBtn").addEventListener("click", function(e){
  playRound("rock", computerSelection);
  e.preventDefault()
});

Right now your form submits the page and it is refreshing by default therefor your message is erased... Read more here: e.preventDefault() on MDN

score 0 · Answer 2 · answered Mar 25 '21 at 01:32

On your eventListener callback, receive the event object as parameter and disable the default "form submition" behaviour.

// note the "e" inside the callback function parameter

document.getElementById("rockBtn").addEventListener("click", function(e){
  e.preventDefault(); // prevent the form from being submitted(the cause for text disappearing immediately)
  playRound("rock", computerSelection);
});

HTML and JS: How do I use textContent in a div to display text after clicking a button without having the text disappear quickly?

2 Answers2