JavaScript Improvements

[CampbellHarry]

Been a while, How's life?

Not a bad start UI looks good. JS is decent too. Here is some improved JS that may help you out.

How has this improved? Improved reusability, Sorted kndCharacters into an array of objects, More efficient event listeners and it being flexible.

const kndCharacters = [
    {
        backgroundImage: "url('./Kids_Next_Door-logo-08D52E7DD8-seeklogo.com.png')",
        color: "rgb(216, 11, 11)",
        name: "Nigel Uno",
        number: "Numbuh 1",
        details: `Nigel Uno a.k.a. Numbuh 1 is the bald, British leader and head operative of Sector V, 
                  keeper of the Book of KND and current Earth representative to the elite Galactic KND. 
                  Described as a tactical genius by some and as a paranoid workaholic by others, 
                  he has risen to become one of the greatest KND operatives ever. 
                  Numbuh 1 takes his position and responsibilities very seriously, 
                  often engaging in missions for days at a time without rest.`
    },
    {
        backgroundImage: "url('./kids-next-door-logo-30587783B3-seeklogo.com.png')",
        color: "rgb(15, 187, 255)",
        name: "Hogarth Pennywhistle Gilligan Jr.",
        number: "Numbuh 2",
        details: `Numbuh 2 is an American boy who loves cracking puns at every chance he sees, and eating chili dogs. 
                  He is an inventor and pilot with a passion for flight. 
                  He is the 2x4 Technology Officer of Kids Next Door Sector V.`
    },
    {
        backgroundImage: "url('./Dfgl404-e5c4264e-9d16-45cc-93f3-adfe4ad2c399.webp')",
        color: "rgb(12, 171, 83)",
        name: "Kuki Sanban",
        number: "Numbuh 3",
        details: `Kuki Sanban (三番茎) a.k.a. Numbuh 3 is a happy-go-lucky, 10-year-old 4th-grade Japanese-American girl 
                  in charge of Diversionary Tactics and the Medical Specialist of Sector V. 
                  She also takes care of the hamsters that power the treehouse. 
                  She is the youngest operative and one of the two female members in her sector. 
                  As an adult, she becomes President of the Rainbow Monkey Corporation.`
    },
    {
        backgroundImage: "url('./kids-next-door-logo-86FD9913F2-seeklogo.com.png')",
        color: "rgb(231, 149, 8)",
        name: "Wallabee 'Wally' Beetles",
        number: "Numbuh 4",
        details: `Wallabee 'Wally' Beetles a.k.a. Numbuh 4 is the brash and impulsive hand-to-hand combatant 
                  Australian boy of Sector V. He is close friends with Hoagie and has a crush on his teammate Kuki, 
                  whom he marries in the future. He is known for his bravery and lack of intelligence, 
                  preferring to beat up obstacles rather than think through them.`
    },
    {
        backgroundImage: "url('./Numbuh_5.webp')",
        color: "rgb(10, 99, 232)",
        name: "Abigail 'Abby' Lincoln",
        number: "Numbuh 5",
        details: `Abigail 'Abby' Lincoln a.k.a. Numbuh 5 is the intelligent, relaxed second-in-command/spy of Sector V. 
                  She was trained by her older sister Cree, who later betrayed the KND. 
                  Numbuh 5 became leader of Sector V before passing the mantle to Numbuh 1. 
                  She later became Supreme Leader after Numbuh 362 retired.`
    }
];

const btns = document.querySelectorAll('.character-btn');
const numbuh = document.getElementById('numbuh');
const name = document.getElementById('name');
const number = document.getElementById('number');
const details = document.getElementById('details');

function updateCharacter(index) {
    const character = kndCharacters[index];
    numbuh.style.backgroundImage = character.backgroundImage;
    name.style.color = character.color;
    name.textContent = character.name;
    number.textContent = character.number;
    details.innerHTML = character.details;
}

btns.forEach((btn, index) => {
    btn.addEventListener('click', () => updateCharacter(index));
});

[TheAngryCoder2]

Outstanding work

[CampbellHarry]

Happy to help!