Set different backgroundcolor on numbers from an array in DOM Javascript

Question

Im stucked in how to create this below;

1.Create an array with 10 numbers from 0 to 360 2. write out in DOM in an element of choice 3.Set the background color of each number, by using the number of HUE in (hue, saturation, lightness)

//1
let nummers = [1,26,320,45,56,216,78,88,119,100]
  console.log(nummers)

//2
let parNummer = document.querySelector('.nummer')

//3

function brightness(){

    const map1 = nummers.map(x => {
        const skrivUt = document.getElementById('output2')
        nummers.forEach(nummer => {
            if (nummer === 119) skrivUt.style.background = `hsl(${nummer}, 100%, 50%)` 
        })
        skrivUt.innerText = nummers
    });
brightness()

You need to create an element for every number, and set the style of those elements instead of a single element. — Teemu, Oct 13 '22 at 11:40

score 0 · Accepted Answer · answered Oct 13 '22 at 11:53

You're heading in the right direction.

It's not clear if you need to create the element in JS and append it to the DOM, or hardcode it in the HTML, and then pick it up. If it's the former you need to create the element first, and then append it.
You need to make one loop over the numbers rather than use a nested loop. For each element in the array create a new element (I've used a div), set its background colour, and its text content, and then append it to the container.

(Note: I've used a bit of CSS styling to make the example pretty but you can ignore that.)

const numbers = [1, 26, 320, 45, 56, 216, 78, 88, 119, 100];

// Create a containing element
const container = document.createElement('div');
container.className = 'container';

// Append it to the DOM
document.body.append(container);

// Loop over the numbers array
// For each number set the background color, and the
// text content, and then append it to the container
for (let num of numbers) {
  const el = document.createElement('div');
  el.className = 'number';
  el.style.backgroundColor = `hsl(${num}, 100%, 50%)`;
  el.textContent = num;
  container.append(el);
}

.container { display: grid; grid-template-columns: repeat(5, 50px); gap: 0.25em; }
.number { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; font-size: 1.2em;}

Thank you so much! It works! I wasnt thinking of to create new elements for each number, very smart. Thanks! — tocajossan, Oct 13 '22 at 12:41
it says i cant vote yet i need 15 repulation. But yes it answered my question! — tocajossan, Oct 15 '22 at 08:48

Set different backgroundcolor on numbers from an array in DOM Javascript

1 Answers1