.css() won't update background color-CodePudding

The entirety of the code works but when I copy the code to my friends website the color won't update like it would normally. Not sure why it's not working now.

[https://pastebin.com/jm8s6gzX][1]

   function loadPalletes() {
        let colorIndexNum = 0;
        for(let palletes in penguinColors) {
            let colorHex = penguinColors[palletes],
                colorIndex = palletes,
                colorIndexCurrNum =   colorIndexNum;
            $('#palletes').append(`<div data-id="${colorIndexCurrNum}"  style="background: #${colorHex}"></div> `);
        }
        $("#palletes").on("click", function(e) {
            let palletId = $(e.target).attr('data-id'); 
            e.currentTarget.querySelector('.active') ?.classList.remove('active');
            if(e.target.classList.contains('tinyPallete')) {
                e.target.classList.add('active');
            }
            $("#penguinDoll").css('background-color', penguinColorByIndex(palletId, false));
            console.log("color updated?")
        });
    }
 
    function penguinColorByIndex(index, keys) {
        if(keys) {
            return(Object.keys(penguinColors)[--index]);
        }
        return(Object.values(penguinColors)[--index]);
    }
    let penguinColors = { 
        "Blue": "003366",
        "Green": "009900",
        "Pink": "FF3399",
        "Black": "333333",
        "Orange": "FF6600",
        "Yellow": "FFCC00",
        "Dark Purple": "660099",
        "Brown": "996600",
        "Red": "CC0000",
        "Dark Green": "006600",
        "Light Blue": "0099CC",
        "Lime Green": "8AE302",
        "Gray": "93A0A4",
        "Aqua": "02A797",
        "Arctic White": "F0F0D8"
    };
   window.onload = function() {
        loadPalletes();
    }

I attached a pastebin of the entire index page.

CodePudding user response：

The issue is this line:

$("#penguinDoll").css('background-color', penguinColorByIndex(palletId, false));

And specifically the returned value of penguinColorByIndex, which is just the hexvalue (for example, 333333).

You need to add a hash to make it valid, like:

$("#penguinDoll").css('background-color', '#' penguinColorByIndex(palletId, false));

So you're setting #333333, and not 333333.