vendredi 14 août 2015

sJavaScript "Uncaught TypeError: Cannot read property 'checked' of null" with dynamically created checkboxes

So I've seen the Uncaught TypeError: Cannot read property 'checked' of null question come up a few times before. But none of those helped me. All of those answers seemed concerned with the code loading before the page had loaded fully or that there was something with the quotes or something.

The entire program has to be in a window.onload function for major parts of it to work (keeping divs hidden and such), so perhaps it's something to do with that? Also, I had to create the ID's of the checkboxes dynamically.

The code I am having trouble with looks like this:

var list = [document.getElementById("div1"), document.getElementById("div2")];
var form = [document.createElement("form"), document.createElement("form")];
var tradeValue = [0, 0];
var toBeTraded = {
    name: [[], [], [], [], []],
    x: [[], [], [], [], []],
    yru: [[], [], [], [], []],
    type: [[], [], [], [], []],
    value: [[], [], [], [], []],
    w: [[], [], [], [], []]
};
var player = {
    pNames: [[], [], [], [], []],
    pType: [[], [], [], [], []],
    pX: [[], [], [], [], []],
    pYRU: [[], [], [], [], []],
    pValue: [[], [], [], [], []],
};
var tradeInitiated = 0;
var trdsel = document.getElementById("tp2");
var tradee;
    var trade = {
    list: function (p, z) {
        for (var i = 0; i < player.pNames[p].length; i++) {
            var label = document.createElement("label");
            var checkBox = document.createElement("input");
            checkBox.type = "checkbox";
            label.innerHTML = (player.pNames[p][i] + "    ");
            checkBox.id = z + "_" + i;
            label.appendChild(checkBox);
            form[z].appendChild(label);
        }
        list[z].appendChild(form[z]);
    },
    calc: function (k, z) {
        for (var i = 0; i < player.pNames[k].length; i++) {
            if (document.getElementById(z + "_" + i).checked === true) {
                tradeValue[z] = tradeValue[z] + player.pValue[k][i];
            }
        }
    },
    exch: function (k, l, z) {
        for (var i = 0; i < player.pNames[k].length; i++) {
            if (document.getElementById(z + "_" + i).checked === true) {
                if (player.pType[k][i] === "property") {
                    prop.id[player.pX[k][i]][player.pYRU[k][i]] = l;
                } else if (player.pType[k][i] === "rr") {
                    rr.id[player.pYRU[k][i]] = l;
                } else if (player.pType[k][i] === "utility") {
                    utils.id[player.pYRU[k][i]] = l;
                }
                monopolyTest();
                toBeTraded.name[k].push(player.pNames[k][i]);
                toBeTraded.x[k].push(player.pX[k][i]);
                toBeTraded.yru[k].push(player.pYRU[k][i]);
                toBeTraded.type[k].push(player.pType[k][i]);
                toBeTraded.value[k].push(player.pValue[k][i]);
                toBeTraded.w[k].push(i);
            }
        }
        trade.exchAct(k, l, z);
    },
    exchAct: function (k, l, z) {
        for (var i = 0; i < toBeTraded.name[k].length; i++) {
            player.pNames[l].push(toBeTraded.name[k][i]);
            player.pX[l].push(toBeTraded.x[k][i]);
            player.pYRU[l].push(toBeTraded.yru[k][i]);
            player.pType[l].push(toBeTraded.type[k][i]);
            player.pValue[l].push(toBeTraded.value[k][i]);
            tradeValue[z] = tradeValue[z] + toBeTraded.value[k][i];
            player.pNames[k].splice(toBeTraded.w[i], 1);
            player.pX[k].splice(toBeTraded.w[i], 1);
            player.pYRU[k].splice(toBeTraded[i], 1);
            player.pType[k].splice(toBeTraded[i], 1);
            player.pValue[k].splice(toBeTraded[i], 1);
        }
        toBeTraded.name = [[], [], [], [], []];
        toBeTraded.x = [[], [], [], [], []];
        toBeTraded.yru = [[], [], [], [], []];
        toBeTraded.type = [[], [], [], [], []];
        toBeTraded.value = [[], [], [], [], []];
        toBeTraded.w = [[], [], [], [], []];
    },
    prep: function () {
        tradee = document.getElementById("tp2").value;
        if (tradeInitiated === 0) {
            var tradeConfirmation = confirm("Would you like to trade with Player " + tradee + "?");
            if (tradeConfirmation === true) {
                tradeInitiated = 1;
                menu("trade");
                trade.list(turn, 0);
                trade.list(tradee, 1);
                trdsel.innerHTML = "";
            }
        }
        return tradee;
        $("#commenceTrade").on("click", function () { trade.act(); });
    },
    act: function () {
        alert("Player " + turn + ", allow Player " + tradee + " to access the computer to confirm the trade.");
        trade.calc(turn, 0);
        trade.calc(tradee, 1);
        var tradeIsOkay = confirm("Player " + tradee + ", look carefully. Are you alright with this trade? (Trade Value: " + tradeValue[0] + " vs. " + tradeValue[1] + ".)");
        if (tradeIsOkay === true) {
            trade.exch(turn, tradee, 0);
            trade.exch(tradee, turn, 1);
            trade.retSetup();
            console.log(prop.mnplTF);
            tradeValue[0] = 0;
            tradeValue[1] = 0;
        } else {
            tradeValue[0] = 0;
            tradeValue[1] = 0;
        }
    }
};

The weird problem is it is working in trade.calc but not trade.exch. Is there something obvious that I am missing? I am fairly new to JavaScript but my code looks right to me.

Also, trade.act() is called upon by a button press, but it only breaks at trade.exch().




Aucun commentaire:

Enregistrer un commentaire