How do I access a variable outside the scope it is declared?

Question

let playerone = document.querySelector(".dealItP1");
let playertwo = document.querySelector(".dealItP2");
let playerthree = document.querySelector(".dealItP3");
let playerfour = document.querySelector(".dealItP4");
let playerUserPot = [0];
let playerUserPotOriginal = [...playerUserPot];
let playerOnePot = [500];
let playerOnePotOriginal = [...playerOnePot];
let playerTwoPot = [500];
let playerTwoPotOriginal = [...playerTwoPot];
let playerThreePot = [500];
let playerThreePotOriginal = [...playerThreePot];
let playerFourPot = [500];
let playerFourPotOriginal = [...playerFourPot];

let deck = ["2 Club", "2 Spade", "2 Diamond", "2 Heart", "3 Club", "3 Spade", "3 Diamond", "3 Heart", "4 Club", "4 Spade", "4 Diamond", "4 Heart", "5 Club", "5 Spade", "5 Diamond", "5 Heart", "6 Club", "6 Spade", "6 Diamond", "6 Heart", "7 Club", "7 Spade", "7 Diamond", "7 Heart", "8 Club", "8 Spade", "8 Diamond", "8 Heart", "9 Club", "9 Spade", "9 Diamond", "9 Heart", "10 Club", "10 Spade", "10 Diamond", "10 Heart", "Jack Club", "Jack Spade", "Jack Diamond", "Jack Heart", "Queen Club", "Queen Spade", "Queen Diamond", "Queen Heart", "King Club", "King Spade", "King Diamond", "King Heart", "Ace Club", "Ace Spade", "Ace Diamond", "Ace Heart"];

let originaldeck = [...deck];

const shuffle = arr => arr.reduceRight((res, _, __, arr) => [...res, arr.splice(~~(Math.random() * arr.length), 1)[0]], []);

var PlayPoker = {

  setGameStart: function() {

    this.startingPot();

    this.activePlayers();

    this.dealPlayers();

    this.bigBlind();

    this.loopPoker();

  },

  startingPot: function() {
    document.querySelector("#userPot").innerHTML = 'Pot:' + playerUserPot;
    document.querySelector("#p1Pot").innerHTML = 'Pot:' + playerOnePot;
    document.querySelector("#p2Pot").innerHTML = 'Pot:' + playerTwoPot;
    document.querySelector("#p3Pot").innerHTML = 'Pot:' + playerThreePot;
    document.querySelector("#p4Pot").innerHTML = 'Pot:' + playerFourPot;
  },

  activePlayers: function() {
    var activePlayers1 = ["User", "Player1", "Player2", "Player3", "Player4"];

    if (playerUserPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'User');
    };


    if (playerOnePot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player1');
    };

    if (playerTwoPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player2');
    };

    if (playerThreePot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player3');
    };

    if (playerFourPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player4');
    };





  },


  dealPlayers: function() {
    var freshDeck01 = shuffle(originaldeck);
    var userDeal = freshDeck01.filter(function(value, index, arr) {
      return index < 2;
    });
    Array.prototype.subtract = function(array) {
      array = array.slice();
      return this.filter(function(freshDeck01) {
        var p = array.indexOf(freshDeck01);
        if (p === -1) {
          return true;
        }
        array.splice(p, 1);
      });
    }
    var loadedDeck01 = freshDeck01.subtract(userDeal);
    var freshDeck02 = shuffle(loadedDeck01);
    var p1Deal = freshDeck02.filter(function(value, index, arr) {
      return index < 2;
    });

    var loadedDeck02 = freshDeck02.subtract(p1Deal);
    var freshDeck03 = shuffle(loadedDeck02);
    var p2Deal = freshDeck03.filter(function(value, index, arr) {
      return index < 2;
    });

    var loadedDeck03 = freshDeck03.subtract(p2Deal);
    var freshDeck04 = shuffle(loadedDeck03);
    var p3Deal = freshDeck04.filter(function(value, index, arr) {
      return index < 2;
    });

    var loadedDeck04 = freshDeck04.subtract(p3Deal);
    var freshDeck05 = shuffle(loadedDeck04);
    var p4Deal = freshDeck05.filter(function(value, index, arr) {
      return index < 2;
    });

    let xu = document.querySelector(".dealItUser"); /*Deal Cards*/
    xu.innerHTML = '<p>User</p>' + userDeal;
    let x1 = document.querySelector(".dealItP1");
    x1.innerHTML = '<p>The Mouth</p>' + p1Deal;
    let x2 = document.querySelector(".dealItP2");
    x2.innerHTML = '<p>Snake Eyes</p>' + p2Deal;
    let x3 = document.querySelector(".dealItP3");
    x3.innerHTML = '<p>10 gallon</p>' + p3Deal;
    let x4 = document.querySelector(".dealItP4");
    x4.innerHTML = '<p>Glance A lot</p>' + p4Deal;




  },


  bigBlind: function() {},

  loopPoker: function() {

    for (let i = 0; i < 5; i++)



    {

      if (i = 1) {
        document.querySelector(".button").value = 1;
      };
      if (i = 2) {
        document.querySelector(".button").value = 2;
      };
      if (i = 3) {
        document.querySelector(".button").value = 3;
      };
      if (i = 4) {
        document.querySelector(".button").value = 4;
      };
      if (i = 5) {
        document.querySelector(".button").vlaue = 0;
      };



    }
  }
}

.main {
  box-sizing: border-box;
  border: 3px solid green;
  height: 1200px;
  width: 1200px;
  position: absolute;
  background-color: black;
}

.title {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 1%;
  left: 1%;
  background-color: green;
  opacity: .8;
  font-family: coniferous, sans-serif;
  font-style: normal;
  font-weight: 300;
  color: black;
}

.User {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 28%;
  left: 67%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItUser {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 85%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.UserFormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.UserFormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.UserFormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

.P1 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 28%;
  left: 32%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItP1 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 70%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.P1FormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.P1FormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.P1FormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

.P2 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 45%;
  left: 1%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItP2 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 55%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.P2FormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.P2FormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.P2FormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

.P3 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 62%;
  left: 32%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItP3 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 40%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.P3FormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.P3FormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.P3FormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

.P4 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 45%;
  left: 67%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItP4 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 25%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.P4FormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.P4FormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.P4FormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link href="../CSS/pokerTryOne.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="main">
    <div class="dealItUser">7
    </div>
    <div class="title"><button class="button" value="0" style="height:150px; width: 150px; background-color: red; color: yellow;" onclick="PlayPoker.setGameStart()">Click Button to Deal</button>
      <div class="counter" style="color: red; font-size: 2em">7</div>
    </div>
    <div class="User">
      "Hold'en Fold'ems" User Player
      <p id="userPot">Pot:</p>


      <form method="post" action="form-handler.php">
        <div>
          <div class="UserFormBet">
            <p>Bet:</p>
          </div>
          <div class="UserFormRadio">
            <input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="UserFormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />
            <p>
              <input type="submit" value="Submit" id="submit" />
            </p>
          </div>
      </form>
      </div>



    </div>
    <div class="dealItP1">7</div>
    <div class="P1">
      "The Mouth" Phil Hellmuth
      <p id="p1Pot">Pot:</p>


      <form method="post" action="form-handler.php">
        <div>
          <div class="P1FormBet">
            <p>Bet:</p>
          </div>
          <div class="P1FormRadio">
            <input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="P1FormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />
            <p>
              <input type="submit" value="Submit" id="submit" />
            </p>
          </div>
      </form>
      </div>


    </div>
    <div class="dealItP2">7
    </div>
    <div class="P2">"Snake Eyes" Daniel Negreanu
      <p id="p2Pot">Pot:</p>


      <form method="post" action="form-handler.php">
        <div>
          <div class="P2FormBet">
            <p>Bet:</p>
          </div>
          <div class="P2FormRadio">
            <input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="P2FormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />

            <p>
              <input type="submit" value="Submit" id="submit" /></p>
          </div>
      </form>
      </div>

    </div>
    <div class="dealItP3">7
    </div>
    <div class="P3">"10 Gallon" Doyel Brunsen
      <p id="p3Pot">Pot:</p>

      <form method="post" action="form-handler.php">
        <div>
          <div class="P3FormBet">
            <p>Bet:</p>
          </div>
          <div class="P3FormRadio"><input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="P3FormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />


            <p><input type="submit" value="Submit" id="submit" /></p>
          </div>
      </form>
      </div>
    </div>
    <div class="dealItP4">7
    </div>
    <div class="P4">"Sir Glance A Lot" Phil Ivy
      <p id="p4Pot">Pot:</p>

      <form method="post" action="form-handler.php">
        <div>
          <div class="P4FormBet">
            <p>Bet:</p>
          </div>
          <div class="P4FormRadio"><input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="P4FormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />

            <p>
              <input type="submit" value="Submit" id="submit" />
            </p>
          </div>
      </form>
      </div>

    </div>
  </div>
  <div class="dealBet"></div>
  <div class="flopIt"></div>
  <div class="flopBet"></div>
  <div class="turnIt"></div>
  <div class="turnBet"></div>
  <div class="riverIt"></div>
  <div class="riverBet"></div>
  </div>
  <script type="text/javascript" src="../JavaScript/pokerTryOne.js"></script>
</body>

</html>

I have listed nested functions within the main function"setGameStart" which is set to the variable "PlayPoker". I would like to access the variable activePlayers1, declared in the activePlayers function, from the loopPoker function.

I have tried declaring the variable activePlayers1 with var, and I figured that would work. Maybe it has something to do with parsing it into the function as an argument?

Answer 1

return the activePlayers1 from activePlayer, then pass this to loopPoker, or You can use localStorage

setGameStart: function() {
    
    this.startingPot();

    let activePlayers = this.activePlayers();

    this.dealPlayers();

    this.bigBlind();

    this.loopPoker(activePlayers);

  },

activePlayers: function() {
    
    let activePlayers1 = ["User", "Player1", "Player2", "Player3", "Player4"];

    if (playerUserPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'User');
    };


    if (playerOnePot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player1');
    };

    if (playerTwoPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player2');
    };

    if (playerThreePot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player3');
    };

    if (playerFourPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player4');
    };

    return activePlayers1;
  },


loopPoker: function(activePlayer) {
        console.log(activePlayer);
}

Answer 2

As mentioned in my comment above. You could store something on this and it would work out as the way your code is written now. A simplified version of sorts here:

var PlayPoker = {
  start() {
    this.init();
    this.activatePlayers();
    this.somethingElse();
  },
  init() {
    console.log("init");
    console.log(this.activePlayers); // Notice this.activePlayers is undefined
  },
  activatePlayers() {
    console.log("activatePlayers");
    this.activePlayers = ["A", "B"];
  },
  somethingElse() {
    console.log("somethingElse");
    console.log(this.activePlayers);
  }
}

<button onclick="PlayPoker.start()">Activate</button>

The important thing here is the usage of this. It works here because this happens to be the PlayPoker object in all the occurrences of this in the code above.

That being said, this can be confusing to understand sometimes and I'd recommend you to follow the approach outlined in the accepted answer as it is much easier to reason about. I'm posting this answer just as a complement to my comment above.