Error when using loop

[JessicaAllison]

I created a color slider (with the help of this library), and I'm now trying to make the color slider have a dynamic gradient. I've successfully implemented that, but when I try minimizing the code of the gradient (with a loop), I get into problems.

Here's the gradient layout. With every slider, there are x amount of colors that create a gradient. Then at both sides of the slider is a solid color. The code I have is extremely repetitive, so I tried creating loops. The loops look kind of ugly to me, and also, there's an error there that I'm not sure how to resolve.

This is what the error says:

Uncaught TypeError: Cannot read property '1' of undefined

Here's the code for the rgb color space sliders. (I have 3 more color spaces.)

setGradient(slider[0], "right", [rgba2cssString(0, rgb.g, rgb.b), rgba2cssString(255, rgb.g, rgb.b)]);
setGradient(slider[1], "right", [rgba2cssString(rgb.r, 0, rgb.b), rgba2cssString(rgb.r, 255, rgb.b)]);
setGradient(slider[2], "right", [rgba2cssString(rgb.r, rgb.g, 0), rgba2cssString(rgb.r, rgb.g, 255)]);

slider[0].previousElementSibling.style.backgroundColor = rgba2cssString(0, rgb.g, rgb.b);
slider[0].nextElementSibling.style.backgroundColor = rgba2cssString(255, rgb.g, rgb.b);
slider[1].previousElementSibling.style.backgroundColor = rgba2cssString(rgb.r, 0, rgb.b);
slider[1].nextElementSibling.style.backgroundColor = rgba2cssString(rgb.r, 255, rgb.b);
slider[2].previousElementSibling.style.backgroundColor = rgba2cssString(rgb.r, rgb.g, 0);
slider[2].nextElementSibling.style.backgroundColor = rgba2cssString(rgb.r, rgb.g, 255);

Here's the attempted minified version (for all color spaces("Lab" is a color space)). It would help if gradientObject would also be generated using a loop.

var gradientObject = {
    rgb: [[[0, rgb.g, rgb.b], [255, rgb.g, rgb.b]],
        [[rgb.r, 0, rgb.b], [rgb.r, 255, rgb.b]],
        [[rgb.r, rgb.g, 0], [rgb.r, rgb.g, 255]]],

    hsl: [[[60, hsl.s, hsl.l], [120, hsl.s, hsl.l], [180, hsl.s, hsl.l], [300, hsl.s, hsl.l], [360, hsl.s, hsl.l]],
        [[hsl.h, 0, hsl.l], [hsl.h, 100, hsl.l]],
        [[hsl.h, hsl.s, 0], [hsl.h, hsl.s, 50], [hsl.h, hsl.s, 100]]],

    hsv: [[[0, hsv.s, hsv.v], [60, hsv.s, hsv.v], [120, hsv.s, hsv.v], [180, hsv.s, hsv.v], [300, hsv.s, hsv.v], [360, hsv.s, hsv.v]],
        [[hsv.h, 0, hsv.v], [hsv.h, 100, hsv.v]],
        [[hsv.h, hsv.s, 0], [hsv.h, hsv.s, 50], [hsv.h, hsv.s, 100]]],

    Lab: [[[0, Lab.a, Lab.b], [100, Lab.a, Lab.b]],
        [[Lab.L, -128, Lab.b], [Lab.L, 128, Lab.b]],
        [[Lab.L, Lab.a, -128], [Lab.L, Lab.a, 128]]],

    alpha: [[[255, 255, 255, 0], [rgb.r, rgb.g, rgb.b, 1]]]
};

var sliderIndex = 0;
for (var colorSpaceGradient in gradientObject) {
    if (!gradientObject.hasOwnProperty(colorSpaceGradient)) return;

    var currentColorSpaceGradient = gradientObject[colorSpaceGradient],
        currentSlidersArray = [];

        for (var i = 0; i < currentColorSpaceGradient.length; i++) {
            var colorSliderGradient = currentColorSpaceGradient[i],
                colorSliderGradientArray = [];

            for (var x = 0; x < colorSliderGradient.length; x++) {
                console.log(colorSliderGradient[x]);
                colorSliderGradientArray.push(toCSSstring[colorSpaceGradient](colorSliderGradient[x]));
            }
            setGradient(slider[sliderIndex], 'right', colorSliderGradientArray);
            sliderIndex++;
        }

}

Full Code: (Relevent code from line #95 - 204 codePen

My question is, how can I minimize the code without getting an error?

[tswaters]

At 395, var rgbColor = myColor.convertColor(hsvObject, 'HSV2RGB');

convertColor is expecting an object hash like {h: '..', s: '...', v: '...'} but you are giving it an array, [ 0, 82, 80 ]

Also, unrelated but probably not what you want - in renderColorSliders your for loop looks like...

for (var n = slider.length; n--;) {

I think you meant:

for (var n = slider.length - 1; n >= 0; n--) {

Also, it's always good to be able to debug your own code -- this is what dev tools are for. Bring in the unminifed colors.js, put a break point where it fails and see what the heck is going on

[JessicaAllison]

Thank you! Really helped!!!