Tales game where you select heads or tails and then the computer will select heads or tails and then a random output will be put on the screen if you selected the right one it will add one point to you or the computer or both the first one to five wins. I’m having problem adding the points to ‘thePlayersPoints’ and ‘theComputerPoints’. The outcome I what is where when they equal it will add a point. but what’s happening is because it’s a click function is it will only Add them if the value is already on the page. What I mean is if you click heads an heads comes up it won’t add it until you click it again.
The function that tries to add the points start at line 67.

//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



//get 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 selected.
 HeadsBtn.addEventListener('click', function(){
    PlayersChoice.innerHTML  = 'Heads'
   
})

//Adds Tails to Player selected.
TailsBtn.addEventListener('click',function(pick){
   pick ='Tails' 
    PlayersChoice.innerHTML = `${pick}` 
})


    //computers pinking heads or tails
    btnContaner.addEventListener('click',computersPick)
    function computersPick(pick){
    let random = Math.floor(Math.random() * 2)
    if(random === 1){
    pick = 'Heads'
    }else{
    pick = 'Talis'
    }
    ComputerChoice.innerText = `${pick}`
    }



 //adding the points to the player and computer

 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 ^^^^^^^^






    //outputing the winner.
    function andTheWinnerIs(){
        let Tbtn = document.querySelector('#Tails')
        let Hbtn = document.querySelector('#Heads')
       Tbtn.addEventListener('click',addforplayer)
       Hbtn.addEventListener('click',addforplayer)
       //outputing 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;

}

body {
    overflow: hidden; /* Hide scrollbars */
  }

.PlayerSelected{
position: relative;
right: 150px;
font-family: 'Quantico', sans-serif;


}

.ComputerSelected{
position: relative;
left: 150px;
top: -43px;
font-family: 'Quantico', sans-serif;
}

.PlayerPoints{
    position: relative;
    left: -110px;
    top:109px;
    font-family: 'Quantico';
}

.ComputerPoints{
    position: relative;
    right: -103px;
    top: 60px;
    font-family: 'Quantico';
}


.PlayersChoice{
    color: rgba(19, 107, 207, 0.836);
    background-color: black;
    width: 0px;
    position: relative;
    left: -80px;
    top: -37px
}

#Theoutput{
    font-size:xx-large;
    position: relative;
    top: -120px

    
}

#ThePlayersPoints{
    position: relative;
    top:23.5px;
    width:10px;
    left:-75px;
    font-family: 'Quantico';
}


#TheComputersPoints{
    position: relative;
    left: 150px;
    top: -5px;
    font-family: 'Quantico';
}

.ComputerChoice{
    position: relative;
    right: -250px;
    color:red;
    top: -90px
}



#Thewinner{
    background-color:aqua;

    width: 200px;
}


.H1{
    font-family: 'Kaushan Script', cursive;
    text-shadow: 2px 2px rgba(255, 0, 0, 0.589);
}


#Heads{
outline: none;
border: none;
font-size: xx-large;
cursor: pointer;
}

#Tails{
    outline: none;
    border: none;
    font-size: xx-large;
    cursor: pointer;
}

#Tails:hover{
   font-size: 50px;
    background-color:rgba(0, 26, 255, 0.534);
    box-shadow: 5px 10px gray;
}

#Heads:hover{
    font-size: 50px;
    background-color:rgba(255, 0, 0, 0.664);
    box-shadow: -5px 10px gray;
}

.pickHeadsOrTalis{
    font-family: 'Staatliches';
}
<!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="https://stackoverflow.com/questions/68568889/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' id='o' class="PlayersChoice"></div>
 <h3  class="ComputerSelected" >Computer selected:</h3>
 <div id='ComputerChoice'  class="ComputerChoice "></div>

<h4 class="PlayerPoints" >Player:</h4>
   <h4 class="ComputerPoints"> Computer: </h4>

<div class="PlayersAndComputersPoints">
   <div id='ThePlayersPoints' class="ThePlayersPoints">0</div> 
    <div id='TheComputersPoints'  class="TheComputersPoints">0</div>
</div>

<div id='Theoutput' class="output"></div>
<h1 id='Thewinner' class="winner"></h1>

<h1 class="pickHeadsOrTalis">Pick heads or tails?</h1>

<div id='allBtn' class="btnCon">
<button id='Heads' class="heads">Heads</button>   <button id='Tails'  class="talis">Tails</button>
</div>

</center>
 <script src="app.js"></script>
</body>
</html>