Append a function result to a div

Question

Currently learning how to implement javascript to a webpage but im having troubles. Im trying to append a function result to a div. Its a game of rock paper scissors, where I got the choice buttons to work already, but can't get the score system working. I tried to store the value in a variable, using functions and directly append the computerscore++.

Here's my code:

function resetBtn() {

}

optionBtn.forEach(button => {
  button.addEventListener('click', playerchoice())
});


let rock = "rock";
let paper = "paper";
let scissors = "scissors";

function getComputerChoice() {
  let randomvalue = Math.random();
  if (randomvalue <= 0.33) {
    return rock;
  } else if (randomvalue <= 0.66) {
    return paper;
  } else return scissors;
}

let playerscore = 0
let computerscore = 0

function results(player, computer) {
  if ((player === rock) && (computer === rock)) {
    return ("Its a TIE!");
  } else if ((player === rock) && (computer === paper)) {
    document.querySelector("textscores2") = append(computerscore++);
    return ("You LOSE! Paper beats Rock.");

  } else if ((player === rock) && (computer === scissors)) {
    document.querySelector("textscores1") = append(playerscore++);
    return ("You WIN! Rock beats Scissors.");

  }

  if ((player === scissors) && (computer === scissors)) {
    return ("Its a TIE!");
  } else if ((player === scissors) && (computer === rock)) {
    return ("You LOSE! Rock beats Scissors.");
    document.querySelector("textscores2") = append(computerscore++);
  } else if ((player === scissors) && (computer === paper)) {
    document.querySelector("textscores1") = append(playerscore++);
    return ("You WIN! Scissors beats Paper.");
  }

  if ((player === paper) && (computer === paper)) {
    return ("Its a TIE!");
  } else if ((player === paper) && (computer === scissors)) {
    document.querySelector("textscores2") = append(computerscore++);
    return ("You LOSE! Scissors beats Paper.");
  } else if ((player === paper) && (computer === rock)) {
    document.querySelector("textscores1") = append(playerscore++);
    return ("You WIN! Paper beats Rock.");

  }
}

function playerchoice() {
  //   let choice = prompt("Whats your choice?(rock, paper, scissors)")
  if (choice === "rock") {
    return rock
  } else if (choice === "paper") {
    return paper
  } else {
    return scissors
  }
}

// function append(){
//     const playerscore1 = getElementByClassName("textscores1");
//     playerscore1.innerHTML += playerscore;
// }

// function append(){
//     const playerscore1 = getElementByClassName("textscores2");
//     computerscore2.innerHTML += computerscore;
// }

// const playerscore1 = getElementByClassName("textscores1")
// const computerscore2 = getElementByClassName("textscores2")

// function pscore(){
//     return playerscore1.append(player)
// }

// function cscore(){
//     return computerscore2.append(computer)

// }

while ((playerscore < 5) && (computerscore < 5)) {
  let player = playerchoice();
  let computer = getComputerChoice();
  alert(results(player, computer))
  alert("Player Score: " + playerscore)
  alert("Computer Score: " + computerscore)

}

//    if (playerscore === 5) {
//        alert("You WIN!")
//        break
//     } else if (computerscore === 5) {
//        alert("You LOSE!")
//        break
//    }

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-align: center;
  font-weight: bold;
}

body {
  background-color: rgb(242, 226, 226);
}

.h1 {
  font-size: 90px;
  color: rgb(84, 18, 18);
  margin: 25px;
  margin-top: 40px;
}

.h2 {
  font-size: 60px;
  color: darkred;
  margin: 25px;
}

.h3 {
  font-size: 50px;
  color: brown;
}

.optionBtn {
  display: flex;
  justify-content: center;
  margin: 25px;
}

#rock {
  width: 150px;
  height: 60px;
  border: 5px solid rgb(78, 16, 16);
  margin: 5px;
  background-color: rgb(214, 74, 74);
  font-size: 35px;
}

.paper {
  width: 150px;
  height: 60px;
  border: 5px solid rgb(78, 16, 16);
  margin: 5px;
  background-color: rgb(214, 74, 74);
  font-size: 35px;
}

.scissors {
  width: 150px;
  height: 60px;
  border: 5px solid rgb(78, 16, 16);
  margin: 5px;
  background-color: rgb(214, 74, 74);
  font-size: 35px;
}

.tscore {
  color: rgb(84, 18, 18);
  font-size: 30px;
  margin: 20px;
}

.result {
  color: rgb(84, 18, 18);
  font-size: 30px;
  margin-top: 25px;
}

.textscores {
  display: flex;
  justify-content: center;
}

.textscores1 {
  width: 200px;
  height: 70px;
  border: 5px solid black;
  margin: 5px;
  text-align: center;
}

.textscores2 {
  width: 200px;
  height: 70px;
  border: 5px solid black;
  margin: 5px;
  text-align: center;
}

.score {
  width: 380px;
  height: 140px;
  border: 5px solid black;
  margin: 0 auto;
}

.tscore {
  display: inline;
}

.playAgain {
  width: 150px;
  height: 60px;
  border: 2px solid white;
  margin: 5px;
  background-color: rgb(112, 19, 19);
  color: rgb(214, 74, 74);
  font-size: 25px;
}

<div class="text">
  <h1 class="h1"><strong>Rock Paper Scissors</strong></h1>
  <h2 class="h2">Choose your weapom</h2>
  <h3 class="h3">First To 5 Wins!</h3>
</div>

<div class="optionBtn">
  <button onclick="playerchoice()" id="rock">Rock</button>
  <button onclick="playerchoice()" class="paper">Paper</button>
  <button onclick="playerchoice()" class="scissors">Scissors</button>
</div>


<p class="tscore">Player scores</p>
<p class="tscore">Computer scores</p>

<div class="textscores">
  <div class="textscores1"></div>
  <div class="textscores2"></div>
</div>

<p class="result">Results</p>
<div class="score"></div>

<div class="reset">
  <button onclick="resetBtn()" class="playAgain">Play Again!</button>
</div>