Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

.css() won't update background color

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading