Edit part of a div created using .createElement in js rather than duplicating the whole line

Question

Im making a rock paper scissors game using js and html. Right now I'm having an issue with displaying the computers random choice. I created the text that appears purley through js with the .createElement method and it partially works. Right now this is what I'm getting:

I don't want to add a new line every time the player clicks a button. I just want to update the part with the orange box around it:

I have looked online for solutions but couldn't make sense of the solutions so any help with this would be greatly appreciated.

const getComputerChoice = () => {
  let optionsArray = ["rock", "paper", "scissors"];
  let randomNumber = Math.floor(Math.random() * optionsArray.length);

  let compChoiceText = document.createElement("div");
  compChoiceText.className = "font-light text-white text-4xl";


  compChoiceText.innerHTML = `
      Computer chose: ${optionsArray[randomNumber]}
    `;
  document.getElementById("text-output-container").appendChild(compChoiceText);
};


const choice = document.querySelector(".buttons");
choice.addEventListener("click", (event) => {
  getComputerChoice();
});






  
  
  ROCK PAPER SCISSORS

Hannon qaoud · Answer

instead of creating the element every time, creare it once in the html and edit it evertime the user clicks

const getComputerChoice = () => {
  let optionsArray = ["rock", "paper", "scissors"];
  let randomNumber = Math.floor(Math.random() * optionsArray.length);
  // edit here
  let compChoiceText = document.getElementById("computer-response");
  
  compChoiceText.innerHTML = `
      Computer chose: ${optionsArray[randomNumber]}
    `;
  document.getElementById("text-output-container").appendChild(compChoiceText);
};


const choice = document.querySelector(".buttons");
choice.addEventListener("click", (event) => {
  getComputerChoice();
});






  
  
  ROCK PAPER SCISSORS

hasin · Answer

Figured it out. Each time the getCompChoice function was called I was creating a new div so all I needed to do was create the div once then edit the variable.

let compChoiceText;

const getComputerChoice = () => {
  let optionsArray = ["rock", "paper", "scissors"];
  let randomNumber = Math.floor(Math.random() * optionsArray.length);
  if (!compChoiceText) {
  compChoiceText = document.createElement("div");
  compChoiceText.className = "font-light text-white text-4xl";
  }
  console.log(optionsArray[randomNumber]);

  compChoiceText.innerHTML = `
      Computer chose: ${optionsArray[randomNumber]}
    `;
  document.getElementById("text-output-container").appendChild(compChoiceText);
};


const choice = document.querySelector(".buttons");
choice.addEventListener("click", (event) => {
  getComputerChoice();
});






  
  
  ROCK PAPER SCISSORS

Edit part of a div created using .createElement in js rather than duplicating the whole line

2 Answers