# JavaScript: Select different background color of each element from different color
**URL:** https://forum.kirupa.com/t/javascript-select-different-background-color-of-each-element-from-different-color/650328
**Category:** Uncategorized
**Created:** [January 5, 2022, 5:47pm UTC](https://forum.kirupa.com/t/javascript-select-different-background-color-of-each-element-from-different-color/650328 "2022-01-05T17:47:26Z")
**Posts on this page:** 5
**Page:** 1
I have a project which is the note-taking website. When someone adds a note it is stored in local storage in the form of an array and a Javascript function works which calls the stored element and runs `for each` on the elements. Here is the Javascript code:
```auto
function showNote2() {
console.log("Show");
let note = localStorage.getItem("notes");
if(note == null){
noteData = []
// message.innerText = "Please Add a Note"
}
else{
noteData = JSON.parse(note);
};
let showBox = "";
noteData.forEach(function show(element, index) {
showBox += `
Note
${index + 1}
${element}
`
})
let showNote3 = document.getElementById("notes2");
if(noteData.length != 0){
showNote3.innerHTML = showBox;
}else{
showNote3.innerHTML = "Please add a Note"
}
}
```
In the above code, `select` gives us the option to choose a color for the note, now I want to add a function to `onchange` which can help me choose a different color for different notes. The function I used was working only on the first-note and setting the color of all notes according to the selected option of first-note. The color will be applied on class with `card-body`
I am building this for practice in Javascript. Any hints would be appreciated, as this is something new for me
---
I think it’s great that your having a play around with vanilla JS 🙂
Usually when you store data you store it as an object e.g.
```auto
let notes = {
note1: { title: "Important Reminder", message: "Pay phone bill", colour: "red"},
note2: {another: 'note'}
}
```
and iterate objects eg.
```auto
for(let [key, obj] of Object.entries(notes)){
let content = `
${obj.title}
${obj.message}
`
elements[i].innerHTML = content;
```
It would probably be easier to put your values inside your template string like above.
But if your super worried about XSS ect you can always do
```auto
document.createElement(documentFragment);
forEach() // createElement(), element.textContent = title ect, docFrag.appendChild(el)
```
(BTW, just above is pseudo code, it wont work as is 🙂)
Also if you are using `custom-elements` you can attach your event listeners to `connectedCallback()`
> **[Handling Events for Many Elements](https://www.kirupa.com/html5/handling_events_for_many_elements.htm)**
>
> Without bloating your code, learn how to rely on event propagation to easily and efficiently listen for events on many elements.
You could use a button on each card to change the colour or on the right click but right click wouldn’t work on mobile.
If you attach the object key to the element e.g. `data-id = ${key}` you can then use the `element.dataset.id` to access the stored object and update the colour in localStorage
---
Thanks @steve.mills Got it
But i applied this solution and i am getting this error. Can YOU please also have a look at this:
`function change_color(index) { let note = localStorage.getItem("notes"); if(note != null ){ let colorApply = document.getElementById("card3") let elm1 = document.getElementById(index) let color = elm1.options[elm1.selectedIndex].value; document.colorApply.style.backgroundColor = color; } else{ `Note is Empty` }`
The error i am getting is:
“Cannot read properties of null (reading ‘options’)” Any help would be appreciated?
---
When either selecting JS `objects` or DOM `elements` you can only access properties that the object or element has.
The `request` event object from `fetch` will usually have e.g. `url: "index.html", "method: 'GET', mode: 'navigate'` so you could access the `method` by `event.request.method`.
HTML Elements usually have `id, class, style` ect and if you define a `data-property` you can access it by `element.dataset.property`.
If you want to work out what properties an object has just log it to the console e.g. `console.log(elm1)`.
I think this is what your trying to do
```auto
const changeColor = function (cardId) {
let selectedColor;
let notes = localStorage.getItem('notes');
let card = document.getElementById(cardId);
let objId = card.dataset.id;
let selectEl = card.querySelector('select');
let nodes = selectEl.children;
for (let option of nodes) {
if (option.selected == 'true') {
selectedColor = option.value;
card.style.backgroundColor = selectedColor;
break
}
else continue
}
if (selectedColor) {
let notesObj = JSON.parse(notes);
let cardObj = notesObj[objId];
if (cardObj) cardObj.color = cardColor;
localStorage.setItem('notes', JSON.stringify(notesObj))
}
}
```
---