.css() won't update background color

Question

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}" class="tinyPallete" 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.

Post relevant code in the question - check browser console for errors — Bravo
– Bravo, Commented Jun 10, 2022 at 5:18

Jack · Accepted Answer · 2022-06-10 05:24:57Z

1

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.

answered Jun 10, 2022 at 5:24

Jack

9,4282 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zesty Over a year ago

That's weird cause on my original file I didn't have to include the hashtag but that did solve the issue.

Collectives™ on Stack Overflow

.css() won't update background color

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related