"If statement" within for loop class name undefined

Question

Each card has class names of "card player1card ________" or "card player2card _______" where the blank space is a random class name that is allocated from the cardnames array.

I want the code to check all cards, and for those which are player1card for them to have their class changed to "card player1card" and then an updated class from the cardnames array, and same for player2card.

All variables have been pre-defined.

I get the error "Uncaught TypeError: Cannot set property 'className' of undefined"

var cardsnames = ["recruitbuilder", "allwood", "cabin", "messhall", "mast", "captainsquarters", "schooner", "brig", "frigate", "shipballista", "ram", "crowsnest", "spoondrill", "reinforcements", "recruitgunman", "allgunpowder", "firebarrel", "fireship", "roundshot", "heavyshot", "swivelgun", "chainshot", "mortar", "barrage", "resupply", "smuggler", "blockade", "mutiny", "recruitmerchant", "allgold", "addwood", "addgunpowder", "addgold", "removewood", "removegunpowder", "removegold", "byzantinefire", "slaves", "mercenaries", "ironplating", "coercion", "ascension"];

var w;
var allocatedcard;
var card = document.getElementsByClassName("card");

for (w = 0; w < card.length; w++) {
    if (document.getElementsByClassName("card")[w].className.match('player1card')) {
        this.className = "card player1card";
        var allocatedcard = Math.floor(Math.random() * cardsnames.length);
        this.className += " " + cardsnames[allocatedcard];
        updateimages();             
    } else if (document.getElementsByClassName("card")[w].className.match('player2card')) {
        this.className = "card player2card";
        var allocatedcard = Math.floor(Math.random() * cardsnames.length);
        this.className += " " + cardsnames[allocatedcard];
        updateimages();     
    }
}

Answer 1

Just for context, the code in the question would have been a function within another function. So instead I did it this way:

var recruitbuilder = document.getElementsByClassName('recruitbuilder');
var f;
var className = "";
var cardsnames = ["recruitbuilder", "allwood", "cabin", "messhall", "mast", "captainsquarters", "schooner", "brig", "frigate", "shipballista", "ram", "crowsnest", "spoondrill", "reinforcements", "recruitgunman", "allgunpowder", "firebarrel", "fireship", "roundshot", "heavyshot", "swivelgun", "chainshot", "mortar", "barrage", "resupply", "smuggler", "blockade", "mutiny", "recruitmerchant", "allgold", "addwood", "addgunpowder", "addgold", "removewood", "removegunpowder", "removegold", "byzantinefire", "slaves", "mercenaries", "ironplating", "coercion", "ascension"];
var allocatedcard = cardsnames[Math.floor(Math.random() * cardsnames.length)];

for (f = 0; f < recruitbuilder.length; f++) {
    recruitbuilder[f].onclick = function() {
        recruitbuilderfunc(p1);
        displayvaluesp1(p1);
        if (this.classList.contains('player1card') == true ) {
            className = "player1card";
        } else if (this.classList.contains('player2card') == true ) {
            className = "player2card";
        }
      //this.className += " " + cardsnames[allocatedcard];

      this.className = "card " + className + " " + allocatedcard;
      updateimages();
    }
}