How can I make the number of rounds increase by 1 every time a card is clicked, rather than jumping to 4 and staying there? The initial value is set at 'let rounds = 0;' in my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BioRhyme:wght@800&display=swap" rel="stylesheet">
<title>Card Game</title>
</head>
<body>
<h1>Card Game</h1>
<p>Choose a card and get a random point. <br> First player to get 20 points in the least amount of rounds wins</p>
<div class="scoreboard">
<div class="user-score">Points: 0</div>
<button>Play Again</button>
<div class="winner"></div>
<div class="computer-score">Points: 0</div>
<div class="rounds">Rounds: 0</div>
</div>
<div class="cards">
<div class="card1">
<div class="button">
<img class="card1" src="bluecard.png" height=250px width=250px>
<div class="overlay1"></div>
</div>
</div>
<div class="card2">
<div class="button">
<img class="card2" src="bluecard.png" height=250px width=250px>
<div class="overlay2"></div>
</div>
</div>
<div class="card3">
<div class="button">
<img class="card3" src="bluecard.png" height=250px width=250px>
<div class="overlay3"></div>
</div>
</div>
<div class="card4">
<div class="button">
<img class="card4" src="bluecard.png" height=250px width=250px>
<div class="overlay4"></div>
</div>
</div>
</div>
<div class="numbers">
<div class="user-numbers">Your numbers: </div>
<div class="computer-numbers">My numbers: </div>
</div>
<script src="index.js"></script>
</body>
</html>
// Global variables
const btn = document.querySelectorAll(".button");
const userScore = document.querySelector(".user-score");
const computerScore = document.querySelector(".computer-score");
const userChoice = document.querySelector(".user-choice");
const computerChoice = document.querySelector(".computer-choice");
const userNumbers = document.querySelector(".user-numbers");
const computerNumbers = document.querySelector(".computer-numbers");
const winner_div = document.querySelector(".winner");
const rounds_div = document.querySelector(".rounds");
const buttonAppear = document.querySelector(".button");
// Initialize variables to 0
let total = 0;
let totalc = 0;
let usertotal = 0;
let computertotal = 0;
let ranNum = 0;
let ranNumC = 0;
let rounds = 0;
const userArray = [];
const computerArray = [];
btn.forEach(function(button){
button.addEventListener('click', usergetNumber);
rounds++
rounds_div.innerHTML = "Rounds: " + rounds;
});
// Run a randomized number from 1-10 whenever user clicks a button and add it
// to the previous number and display the new total
function usergetNumber(){
const ranNum = Math.floor(Math.random() * 10)
usertotal = parseInt(total += ranNum);
userNumbers.innerHTML = "Your numbers: " + ranNum;
userArray.push(" " + ranNum);
userNumbers.innerHTML = "Your numbers: " + userArray;
userScore.innerHTML = "Your total: " + usertotal;
computergetNumber();
checkWinner();
};
function computergetNumber(){
const ranNumC = Math.floor(Math.random() * 10)
computertotal = parseInt(totalc += ranNumC);
computerNumbers.innerHTML = "My numbers:" + " " + ranNumC;
computerArray.push(" " + ranNumC);
computerNumbers.innerHTML = "My numbers: " + computerArray;
computerScore.innerHTML = "My total: " + computertotal;
}
function checkWinner(){
if(usertotal === 20) {
winner_div.innerHTML = "YOU WIN!"
}
else if(usertotal > 20) {
winner_div.innerHTML = "Too high!"
}
else{
winner_div.innerHTML = ""
}
};