title: Uncaught ReferenceError: war is not defined
body: <p>I am trying to make a make a simple card game web application.</p>
  
  <p>When trying to run the war.refillDeck() function from the button click I receive the following error in my console: Uncaught ReferenceError: war is not defined</p>
  
  <p>From what I have researched it seems my javascript is not being loaded into the page however I am not sure what I am doing wrong as I have included my javascript and jQuery references in my page head.</p>
  
  <p>The following are snippets of my php page and javascript:</p>
  
  <p>war.php</p>
  
  <pre><code>    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!--------------------------CSS---------------------------&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;!-- Page CSS --&gt;
      &lt;link rel="stylesheet" href="css/war.css"&gt;
      &lt;!-----------------------Javascript-----------------------&gt;
      &lt;!-- jQuery library --&gt;
      &lt;script src="js/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
      &lt;!-- Latest compiled JavaScript --&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- Page JS --&gt;
      &lt;script src="js/war.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container war"&gt;
          &lt;!-- Heading --&gt;
          &lt;div class="row"&gt;
              &lt;div id="p1-cards-remaining" class="col-sm-6 col-md-6 col-lg-6 war-head"&gt;
                  &lt;h2 class="ht"&gt;Player 1 Cards Remaining&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div id="p2-cards-remaining" class="col-sm-6 col-md-6 col-lg-6 war-head"&gt;
                  &lt;h2 class="ht"&gt;Player 2 Cards Remaining&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Play Field --&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-6 col-md-6 col-lg-6"&gt;
                  &lt;div id="p1-field" class="pf"&gt;
                      &lt;p&gt;p1 card goes here&lt;/p&gt;
                      &lt;button onclick="war.refillDeck()"&gt;Refill Deck&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>war.js</p>
  
  <pre><code>$(document).ready(function () {
  var aDeck =[],
      aP1Deck =[],
      aP2Deck = [],
      iTurnCounter = 0,
      aNumbers = [
          'ace',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8',
          '9',
          '10',
          'jack',
          'queen',
          'king'
      ],
      aSuits = [
          'clubs',
          'diamonds',
          'spades',
          'hearts'
      ],
      oColors = {
          club: 'black',
          diamond: 'red',
          heart: 'red',
          spade: 'red'
      },
      oRanks = {
          ace: {
              rank: '1'
          },
          '2': {
              rank: '2'
          },
          '3': {
              rank: '3'
          },
          '4': {
              rank: '4'
          },
          '5': {
              rank: '5'
          },
          '6': {
              rank: '6'
          },
          '7': {
              rank: '7'
          },
          '8': {
              rank: '8'
          },
          '9': {
              rank: '9'
          },
          '10': {
              rank: '10'
          },
          jack: {
              rank: '11'
          },
          'queen': {
              rank: '12'
          },
          'king': {
              rank: '13'
          }
      },
      iCounter,
      oImageObjects = {},
      oImageBack = new Image(),
      oLastCard;
  
  var war = {
  
      // used to create each card combination
      returnCard: function (sNumber, sSymbol) {
          var oCard,
              sColor = oColors[sSymbol];
  
          oCard = {
              color: sColor,
              rank: oRanks[sNumber],
              number: sNumber,
              symbol: sSymbol
          }
  
          return oCard;
      },
  
      //shuffle
      shuffleDeck: function (aCards) {
          "use strict";
  
          iCounter = aCards.length;
  
          //while there are still cards
          while (iCounter &gt; 0) {
  
              //get a random index
              var iIndex = Math.floor(Math.random() * iCounter),
                  aTemp;
  
              //decrease counter
              iCounter--;
  
              //swap the last element
              aTemp = aCards[iCounter];
              aCards[iCounter] = aCards[iIndex];
              aCards[iIndex] = aTemp;
          }
  
          return aCards;
      },
  
      refillDeck: function () {
  
          //reset player decks
          aP1Deck = [];
          aP2Deck = [];
  
          $.each(aNumbers, function (i, sNumber) {
              $.each(aSuits, function (j, sSuit) {
                  aDeck.push(this.returnCard(sNumber, sSuit));
  
                  //images
                  if (oImageObjects.length !== 52) {
                      var oImage = new Image(),
                          sCardNumberSuit = sNumber + '_of_' + sSuit;
  
                      oImage.src = 'images/cards/' + sCardNumberSuit + '.png';
                      oImageObjects[sCardNumberSuit] = oImage;
                  }
              }.bind(this));
          }.bind(this));
  
          aDeck = this.shuffleDeck(aDeck);
      },
  
      splitDeck: function (aDeck) {
          //deal the shuffled cards to each player deck
          while (aDeck.length &gt; 0) {
              aP1Deck.push(aDeck.shift());
              aP2Deck.push(aDeck.shift());
          }
          console.log('player decks done.');
      },
  
      compareCards: function (oP1Card, oP2Card) {
          var sWinner;
  
          if (oP1Card.rank &gt; oP2Card.rank) {
              sWinner = 'p1';
          } else if (oP1Card.rank &lt; oP2Card.rank) {
              sWinner = 'p2';
          } else {
              sWinner = 'tie'
          }
  
          return sWinner;
      },
  
      drawCards: function (aP1Deck, aP2Deck) {
          var aBattlefield,
              oP1Card = aP1Deck.shift(),
              oP2Card = aP2Deck.shift(),
              sWinner;
  
          aBattlefield[oP1Card, oP2Card];
  
  
          //get drawn cards images
          document.getElementById('p1-field').style.backgroundImage =
                  "url(" + oImageObjects[oP1Card.number + "_of_" 
                      + oP1Card.symbol].src + ")";
  
          document.getElementById('p2-field').style.backgroundImage =
                  "url(" + oImageObjects[oP2Card.number + "_of_" 
                      + oP2Card.symbol].src + ")";
  
          sWinner = war.compareCards(aBattlefield[0], aBattlefield[1]);
  
          if (sWinner == 'p1') {
              //alert the players
              alert('p2 is battle winner with ' + aBattlefield[0].number + 
                      ' of ' + aBattlefield[0].symbol + ' over ' + 
                      aBattlefield[1].number + ' of ' + aBattlefield[1].symbol);
              // give the winner their rewards
              while (aBattlefield.length &gt; 0) {
                  //TODO: maybe use splice instead of push to make more random
                  aP1Deck.push(aBattlefield.shift());
              }
  
          } else if (sWinner == 'p2') {
              //alert the players
              alert('p2 is battle winner with ' + aBattlefield[1].number + 
                      ' of ' + aBattlefield[1].symbol + ' over ' + 
                      aBattlefield[0].number + ' of ' + aBattlefield[0].symbol);
              //give the winner their rewards
              while (aBattlefield.length &gt; 0) {
                  //TODO: maybe use splice instead of push to make more random
                  aP2Deck.push(aBattlefield.shift());
              }
  
          } else if (sWinner == 'tie') {
              alert('There was a tie. Press \'OK\' for tie breaker');
              //TODO something if there is a tie
          } else {
              console.error('something fucked up when drawing cards');
              alert('please check console log');
          }
      }
  };
  
  });
  </code></pre>