Getting unexpected output when running a function(s). Outputting the code of a prototype

When the loadGame() function is called, it should build deck of cards, deal the cards, then show the cards. It does all this plus more. When it the function to show the cards to the user is run, it outputs the number representing a card(s) along with the code of the only prototype on the whole page. Why?

Part of Javascipt

    //Variables
    var theDeck = new Array();
    var discardPile = new Array();
    var allHands = new Array();

    //Prototypes
    Array.prototype.exists = function(search) {
       for(i=0;i<this.length;i++) 
          if (this[i] == search) return true;
       return false;
    }

    //Functions (Only the ones the that are needed for this question)
    function buildDeck() {
       var i = 0
       for (x=0;x<=3;x++) {
          for (y=0;y<=12;y++) {
             //x is for the type (i.e. spades, hearts, ...)
             //y is for the face value (i.e. nine, ten, jack, ...)
             theDeck[i] = new Array(x,y);
             i++ //Gets ready to add the next card in the deck.
          }
       }
    }
    function dealHands() {
       var cardsOfHand = new Array()
       for (x=0;x<=1;x++) {
          for (y=0;y<=1;y++) {
             allHands[x][y] = fetchCard();
             discardCard(allHands[x][y]);
          }
       }
    }

    function discardCard(card) {
    var totalCards = discardPile.length;
       if (totalCard != 0) { totalCards++ }
       discardPile[totalCards] = card;
    }

    function fetchCard() {
       var usedCard = tr开发者_高级运维ue;
       while(usedCard == true) {
          var randomCard = Math.floor(Math.random()*51);
          usedCard = discardPile.exists(randomCard);
       }
       return randomCard;
    }
    function showHands() {
       for (whoHand in allHands) {
          var hand = allHands[whoHand];
          var cards = "";
          for (whichCard in hand) {
             var card = hand[whichCard];
             cards += "[" + card + "]"; //TEMP: Used for debugging.
          }
          id = "player" + whoHand + "cards";
          document.getElementById(id).innerHTML = cards;
       }
    }
    function loadGame() {
       buildDeck();
       dealHands();
       showHands();
    }

Part of the HTML

    <fieldset>
       <legend align="center">Dealer's Hand</legend>
       <div id="player0cards"></div>
    </fieldset>
    <fieldset id="">
       <legend align="center">Player's Hand</legend>
       <div id="player1cards"></div>
    </fieldset>

The Output

Div Element w/ ID of 'player0cards': [50][12][function (search) { for(i=0;i

Div Element w/ ID of 'player1cards': [14][6][function (search) { for(i=0;i

Note: The numbers (i.e. 50, 12, 14, 6) are random numbers which represent a card.

Why is the another part showing up from the only prototype within the whole script?

Error

Uncaught TypeError: Cannot set property 'innerHTML' of null on the line with the closing } for the for (whoHand in allHands) loop.

---

Looks like the problem is that you run through a native JS-array using the for-in-syntax. This syntax is for objects, if you use it for native arrays it will return members/methods too, like the function "exists".

Use only the for(var i=0;i<array.length;++i)-syntax to iterate over the items of arrays.