Uncaught TypeError for value in array in Javascript

I'm getting an undefined value in my "marketing" array but I have initialised it as 0 and then updated it with an equation that gives a valid value.

var budget = [];
var aid = [];
var marketing = [];
var lives = [];
var costPerLife = [];
var sliders = [];
var rows = 10;
var cols = 5;
var topBuf = 100;
var leftBuf = 100;

// create 5 columns stored as arrays of 10 rows of input boxes, sliders and labels with the names budget, DirectAid, Marketting, Lives and DollarsPerLife
for (var i = 0; i < rows; i++) {

    for (var j = 0; j < cols; j++) {

        // create boxes
        var box = document.createElement("input");
        box.type = "number";
        box.style.position = "absolute";
        box.style.left = j * 200 + leftBuf + "px";
        box.style.top = i * 130 + + topBuf + "px";
        box.style.height = "30px";
        box.style.width = "150px";
        box.value = 0;
        document.body.appendChild(box);

        if (i==0) {
            // add titles to each box
            var title = document.createElement("div");
            title.innerHTML = j==0? "BUDGET " : j==1? "AID " : j==2? "MARKETING " : j==3? "LIVES " : j==4? "DOLLARS / LIFE " : "ERROR";
            title.style.position = "absolute";
            title.style.left = parseInt(box.style.left) + 10 + "px";
            title.style.top = parseInt(box.style.top) - 20 + "px";
            title.style.textAlign = "center";
            document.body.appendChild(title);
        }

        // sort boxes into columns
        if (j % 5 == 0) {
            budget.push(box);
        } else if (j % 5 == 1) {
            aid.push(box);

            // create sliders
            var slider = document.createElement("input");
            slider.type = "range";
            slider.min = 0;
            slider.max = 100;
            slider.value = 50;
            slider.style.position = "absolute";
            slider.style.left = parseInt(box.style.left) + 10 + "px";
            slider.style.top = parseInt(box.style.top) + 50 + "px";
            document.body.appendChild(slider);
            sliders.push(slider);

        } else if (j % 5 == 2) {
            marketing.push(box);
        } else if (j % 5 == 3) {
            lives.push(box);
        } else if (j % 5 == 4) {
            costPerLife.push(box);
        }
    }
}
// create update for changing value of sliders that update the corresponding index of the aid and markesting arrays

for (var i = 0; i < sliders.length; i++) {
    sliders[i].oninput = function() {

        updateSlider(this);
        updateBudget(i+1);
    }
}
function updateSlider(slider) {
    var index = sliders.indexOf(slider);
    aid[index].value = budget[index].value * slider.value / 100;
    marketing[index].value = budget[index].value * (100 - slider.value) / 100;
}

function updateBudget(i) {
    console.log(i);
    budget[i].value = marketing[(i-1)].value; // undefined value error (line 152)
    if (i < budget.length) {
        updateSlider(sliders[i]);
        updateBudget(i+1);
    }
}

The error it's throwing reads

Uncaught TypeError: Cannot read properties of undefined (reading 'value')
    at updateBudget (CharityMogul.html:152:44)
    at slid

ers..oninput (CharityMogul.html:142:13)

I have created the "marketing" array in the same way as all the others, and the others seem to be functioning properly. Any suggestions would be much appreciated.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/ZCdu0LV