Are we supposed to initialize variables in JS, regardless of a “value” being set in HTML?

I started using HTML and CSS a while back, but I started implementing JS only about a couple of weeks ago. I understand JS independently, along with HMTL and CSS. Now that I have to put them together, I don’t understand the implementation of JS– specifically with variables and manipulating them.

I want to increase, decrease, or represent the changes (e.g., Moves left = 10 => Moves left = 9), but my code doesn’t work. Are there specific concepts I need to understand besides “knowing JS basics?” Leaving the code below.

HTML, which only includes the main section:

<section class="game">
        <!--Title -->
        <div class="title">Rock Paper Scissor</div>

        <!--Display Score of player and computer -->
        <div class="score">
          <div class="playerScore">
            <h2>Player</h2>
            <p class="p-count count">0</p>
          </div>
          <div class="computerScore">
            <h2>Computer</h2>
            <p class="c-count count">0</p>
          </div>
        </div>

        <div class="move">Choose your move</div>

        <!--Number of moves left before game ends -->
        <div class="movesleft">Moves Left: 10</div>

        <!--Options available to player to play game -->
        <div class="options">
          <button class="rock">Rock</button>
          <button class="paper">Paper</button>
          <button class="scissor">Scissors</button>
        </div>

        <!--Final result of game -->
        <div class="result"></div>

        <!--Reload the game -->
        <button class="reload">Reload Game?</button>
      </section>

JS, which includes where I want my HTML values to update:

const game = () => {
    let playerScore = document.getElementsByClassName('p-count count'); // At the start of the game the player & computer scores will = 0
    let computerScore = document.getElementsByClassName('c-count count');
    let moves = 0; // Start of gaming... total moves will equal 0, so this will initialize it since both the scores are already initalized at 0.

    playGame();
};

const playGame = () => {
    let playerOptions = [document.getElementsByClassName('rock'), document.getElementsByClassName('paper'), document.getElementsByClassName('scissors')];
    let computerOptions = [document.getElementsByClassName('rock'), document.getElementsByClassName('paper'), document.getElementsByClassName('scissors')];

    playerOptions.forEach(addEventListener("click", function(){
        moves++; // This says "we will add 1 to the total moves made." This will affect the moves variable in the game function.
        let movesLeft = document.getElementById('movesleft'); // Calls the movesleft div-class
        return movesLeft - moves; // Begins the subtraction of moves from the starting amount
    }));
    
    let computerSelection = computerOptions[Math.floor((Math.random) * computerOptions.length)] // Within the shared options, this will generate a random number between 0 -
    // - & 2 to represent the options within the array (rock, paper, scissors)

    winner();
    gameOver();

};

const winner = (playerOptions, computerOptions) => {
    if (playerOptions[0] & computerOptions[2]) {
        playerScore++; // Rock beats scissors
    } else if (playerOptions[1] && computerOptions[0]) {
        playerScore++; // Paper beats rock
    } else if (playerOptions[2] && computerOptions[2]) {
        playerScore++; // Scissors beats paper
    } else {
        computerScore++;
    } // Checking player's input to see if was a round-winnable move. 
};