In a game of chance, players choose between heads or tails while the computer makes a random selection. The outcome determines whether points are awarded to the player, the computer, or both. The first one to accumulate five points wins. However, there seems to be an issue with updating the points for 'thePlayersPoints' and 'theComputerPoints'. The desired functionality is for a point to be added when the values are equal, but currently, it only updates if the value is already displayed on the screen. This means that selecting heads and having it come up won't immediately add a point until heads is selected again.
//Btns
let btn = document.querySelectorAll('button')
let HeadsBtn = document.querySelector('.heads')
let TailsBtn = document.querySelector('.talis')
let output = document.querySelector('.output')
//Player
let PlayersChoice = document.querySelector('.PlayersChoice')
let ThePlayersPoints = document.querySelector('.ThePlayersPoints')
//computer
let ComputerChoice = document.querySelector('.ComputerChoice')
let TheComputersPoints = document.querySelector('.TheComputersPoints')
//winner
let winner = document.querySelector('.winner')
//headsAndTails
let player = 0
let computer = 0
// Function to determine the output.
let btnContaner = document.querySelector('.btnCon')
btnContaner.addEventListener('click', pinkingOne)
function pinkingOne(TheOutput){
let random = Math.floor(Math.random() * 2)
if(random === 0){
TheOutput = 'Tails'
}else{
TheOutput = 'Heads'
}
output.innerText = `${ TheOutput}`
}
// Adds Heads to player's selection.
HeadsBtn.addEventListener('click', function(){
PlayersChoice.innerHTML = 'Heads'
})
// Adds Tails to player's selection.
TailsBtn.addEventListener('click',function(pick){
pick ='Tails'
PlayersChoice.innerHTML = `${pick}`
})
// Computer randomly selects heads or tails.
btnContaner.addEventListener('click', computersPick)
function computersPick(pick){
let random = Math.floor(Math.random() * 2)
if(random === 1){
pick = 'Heads'
}else{
pick = 'Tails'
}
ComputerChoice.innerText = `${pick}`
}
// Adding points for the player and computer based on selections.
HeadsBtn.addEventListener('click',function(){
if(PlayersChoice.innerHTML === output.innerHTML){
ThePlayersPoints.innerHTML++
}else{
if (ComputerChoice.innerHTML === output.innerHTML){
TheComputersPoints.innerHTML++
}
}
})
TailsBtn.addEventListener('click',function(){
if(PlayersChoice.innerHTML === output.innerHTML){
ThePlayersPoints.innerHTML++
}else{
if (ComputerChoice.innerHTML === output.innerHTML){
TheComputersPoints.innerHTML++
}
}
})
//^^^^^^^adding the points to the player and computer ^^^^^^^^
// Determining the winner.
function andTheWinnerIs(){
let Tbtn = document.querySelector('#Tails')
let Hbtn = document.querySelector('#Heads')
Tbtn.addEventListener('click',addforplayer)
Hbtn.addEventListener('click',addforplayer)
// Selecting the winner
if (ThePlayersPoints.innerHTML == 5 && TheComputersPoints.innerHTML == 5){
winner.innerHTML = `It's a Tie`;
} else if (ThePlayersPoints.innerHTML == 5){
winner.innerHTML = `You Win!!!`;
} else if (TheComputersPoints.innerHTML == 5){
winner.innerHTML = `Computer Wins!!!`;
}
}
html{
background-color:rgba(128, 128, 128, 0.712);
margin:0;
padding:0;
top:0;
}
// Additional CSS styles...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Light Switching</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Quantico&display=swap');
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
</style>
</head>
<body>
<center>
<h1 class='H1'>First Player to 5 points wins!</h1>
<h3 class='PlayerSelected'>Player selected:</h3>
<div id='PlayersChoice' class='PlayersChoice'></div>
... // Remaining HTML code
</body>
</html>