I am currently working on a simple JavaScript game as my very first project. The game involves clicking a button to generate random numbers for both the user and computer, and the winner is determined by the larger number. I have set up a scoreboard to keep track of wins but I am encountering an issue with the scoring function. Can anyone provide some insight or solutions?
Below is the HTML code snippet:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Random - the game</title>
</head>
<body>
<header>
<center><h1>Random</h1>
<h2>The Game</h2></center></center>
</header>
<div class = "scoreTable">
<span id="userScore">0</span>
<span>:</span>
<span id="compScore">0</span>
</div>
<div id="button">
<center><img id="buttonOff" src="images/buttonOff.png" alt="button" height="150px" width="150px" onmousedown="mouseDown()" onmouseup="mouseUp()" onclick="randomNumUser(); randomNumComp(); addScore()" /><center>
</div>
<center><div id="message1">
<p>Your number</p>
<p class="number" id="userNumber"></p>
</div></center>
<center><div id="message2">
<p>Computer number</p>
<p class="number" id="computerNumber"></p>
</div></center>
<script src="main.js"></script>
</body>
</html>
Here is the JavaScript function I have for adding scores:
function addScore() {
let userResult = Number(document.getElementById("userNumber"));
let compResult = Number(document.getElementById("computerNumber"));
let userScore = Number(document.getElementById("userScore"));
let computerScore = Number(document.getElementById("compScore"));
if (userResult > compResult) {
userScore = userScore.innerHTML =+ 1;
} else if (userResult < compResult) {
computerScore = computerScore.innerHTML =+ 1;
}
}