"If statement" 在 for 循环内 class 名称未定义

"If statement" within for loop class name undefined

每张卡片有 class 个 "card player1card ________" 或 "card player2card _______" 的名字,其中空白 space 是从 cardnames 数组中分配的随机 class 名字.

我希望代码检查所有卡片,对于那些 player1card 的卡片,将它们的 class 更改为 "card player1card",然后更新卡片名称数组中的 class , 和 player2card 一样。

所有变量都已预定义。

我收到错误 "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();     
    }
}

就上下文而言,问题中的代码可能是另一个函数中的一个函数。所以我改为这样做:

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