So I’m trying to write out a rock paper scissors game, but the battle part isn’t working. Can someone tell me what’s wrong? Heres my HTML and JS (I’ll deprive your eyes of the luxury of the nice CSS I made… 
:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<meta charset="UTF-8">
<title> Tac </title>
</head>
<!-- R.P.S. container -->
<div id="container">
<!-- Title -->
<p id="title"> Rock, Paper, Scissors!</p>
<!-- R.P.S. selectors -->
<table id="userSelector">
<th id="userHead" colspan="3" style="background-color: black"> Select Your Pose </th>
<tbody>
<tr>
<td><button id="rock"> Rock </button></td>
<td><button id="paper"> Paper </button></td>
<td><button id="scissors"> Scissors </button></td>
</tr>
<tr>
<td colspan="3" id="currentChoice"></td>
</tr>
</tbody>
</table>
<table id="aiSelector">
<th id="aiHead" colspan="3" style="background-color: black"> A.I.'s Pose </th>
<tr>
<td id="aiRock"> Rock </td>
<td id="aiPaper"> Paper </td>
<td id="aiScissors"> Scissors </td>
</tr>
<tr>
<td colspan="3" id="aiChoice"></td>
</tr>
</table>
<!-- Buttons -->
<button id="rpsStarter">
Click to lock your choice and start the battle!
</button>
<table id="scoreboard">
<th colspan="4" id="scoreboardTitle"> Scoreboard </th>
<tr>
<td id="userWinsTitle"> Your Wins </td>
<td id="tiesTitle"> Ties </td>
<td id="aiWinsTitle"> AI Wins </td>
<td id="totalGamesTitle"> Total Games</td>
</tr>
<tr>
<td id="userWins"> 0 </td>
<td id="ties"> 0 </td>
<td id="aiWins"> 0 </td>
<td id="totalGames"> 0 </td>
</tr>
</table>
</div>
<script src='script.js'>
</script>
<body>
</body>
</html>
// Buttons
const currentChoice = document.querySelector('#currentChoice');
const buttonRock = document.querySelector('#rock');
const buttonPaper = document.querySelector('#paper');
const buttonScissors = document.querySelector('#scissors');
const rpsStarter = document.querySelector('#rpsStarter')
// Scoreboard
const userWins = document.querySelector('#userWins')
const aiWins = document.querySelector('#aiWins')
const ties = document.querySelector('#ties')
const totalGames = document.querySelector('#totalGames')
// Button Functions
buttonRock.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
buttonPaper.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
buttonScissors.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
// Random RPS!
rpsStarter.addEventListener("click", function () {
// Assigning variables to buttons
var uW = userWins.textContent
var aW = aiWins.textContent
var t = ties.textContent
var tG = totalGames.textContent
var cC = currentChoice.textContent;
var x = Math.random();
var ai
// AI Randomly picks its sign
if (x <= 0.33){
ai = "Rock";
alert(ai);
} else if (x <= 0.66){
ai = "Paper";
alert(ai);
} else {
ai = "Scissors";
alert(ai);
}
// Battle is determined
if (ai == "Rock"){ //AI gets Rock
if (cC == "Paper"){
alert("You Win!")
uW = toString(parseInt(uW) + 1)
tG = toString(parseInt(tG) + 1)
} else if (cC == "Scissors"){
alert("You get smashed with rock...")
aW = toString(parseInt(aW) + 1)
tG = toString(parseInt(tG) + 1)
}
} else if (ai == "Paper"){ //AI gets Paper
if (cC == "Scissors"){
alert("You Win!")
uW = toString(parseInt(uW) + 1)
tG = toString(parseInt(tG) + 1)
} else if (cC == "Rock"){
alert("You get smothered by paper...")
aW = toString(parseInt(aW) + 1)
tG = toString(parseInt(tG) + 1)
}
} else if (ai == "Scissors"){ //AI gets Scissors
if (cC == "Rock"){
alert("You Win!")
uW = toString(parseInt(uW) + 1)
tG = toString(parseInt(tG) + 1)
} else if (cC == "Paper"){
alert("You get shredded with scissors...")
aW = toString(parseInt(aW) + 1)
tG = toString(parseInt(tG) + 1)
}
} else if (ai == currentChoice.textContent) {
alert("Tie!")
t = toString(parseInt(t) + 1)
} else {
}
});
PS: I put them in different files. Please help!