CODEWITHSUNDEEP
javascripthtml
Marcus
Marcus

Reputation: 57

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. 
};

Upvotes: 2

Views: 152

Answers (1)

Dave Newton
Dave Newton

Reputation: 160311

Should you initialize variables? Yes. Always start from a known state.

But your game functions' variable declarations are local to game—the variables referenced elsewhere are operating on global state (i.e., window), not the variables game declares.

If functionality is going to be spread over multiple functions everything needs to refer to the same thing, regardless of how it's implemented. For example, you could have a class, you could create a closure over the game state and return functions that operate on it, etc.

Upvotes: 2

Related Questions