"If-Anweisung" innerhalb von for -Schleifenklassenname undefined

Question

Jede Karte hat Klassennamen von "card player1card ________" oder "card player2card _______", wobei das Leerzeichen ein zufälliger Klassenname ist, der aus dem Array cardnames zugewiesen wird.

Ich möchte den Code alle Karten überprüfen, und für diejenigen, die player1card für sie sind ihre Klasse in "card player1card" geändert und dann eine aktualisierte Klasse aus dem Array cardnames, und das gleiche für player2card.

Alle Variablen wurden vordefiniert.

Ich erhalte die Fehlermeldung „Nicht abgefangene Typeerror: Kann nicht gesetzt Eigenschaft‚classname‘undefinierten“

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 Kontext wäre der Code in der Frage innerhalb einer anderen Funktion eine Funktion gewesen. Also stattdessen habe ich es so gemacht:

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(); 
    } 
}